/* ── A bill, read as an invoice ────────────────────────────────────────────
   A document, not a screen: white paper, a rule under the header, one column
   of money on the right, and nothing that needs a hover to be understood.

   Same paper palette as everywhere else (the variables at the end of
   layout.css) — no colour is spelled out here that is not one of those. Every
   selector sits under .inv, .vd-doc or .cust-strip so the generic names cannot
   leak onto anyone else's page.

   The last block is @media print, which is not decoration: this is a page
   people will put on paper and hand across a counter. */

/* ── the sheet ── */
.inv {
  background: var(--panel);
  border: 1px solid var(--edge-2);
  border-radius: 12px;
  padding: 1.8rem 2rem 1.4rem;
  max-width: 900px;
  color: var(--ink-2);
}

.inv-label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink-4); font-weight: 700; margin: 0 0 0.3rem;
}

/* ── header: who is selling, and which document this is ── */
.inv-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem;
  border-bottom: 2px solid var(--ink); padding-bottom: 1rem; margin-bottom: 1.2rem;
}
.inv-book-short {
  display: block; font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1.1;
}
.inv-book-full { display: block; font-size: 0.78rem; color: var(--ink-3); margin-top: 0.15rem; }
.inv-doc { text-align: right; flex: 0 0 auto; }
.inv-kind {
  display: inline-block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.09em;
  background: var(--well); border: 1px solid var(--edge-2); border-radius: 999px;
  padding: 0.14rem 0.6rem; color: var(--ink-3);
}
.inv-number {
  font-family: var(--bs-font-monospace); font-size: 1.15rem; font-weight: 700;
  color: var(--ink); margin-top: 0.35rem;
}
.inv-date { font-size: 0.85rem; color: var(--ink-3); }

/* ── bill to ── */
.inv-to { margin-bottom: 1.3rem; }
.inv-to-name { font-weight: 700; font-size: 1rem; color: var(--ink); }
.inv-to-line { font-size: 0.84rem; color: var(--ink-3); }
.inv-to-tax { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.3rem; font-size: 0.76rem; }
.inv-to-tax code { color: var(--ink); background: var(--well); padding: 0 0.3rem; border-radius: 4px; }

/* ── the goods ── */
.inv-items { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.inv-items thead th {
  text-align: left; font-weight: 600; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-3);
  background: var(--well); padding: 0.45rem 0.55rem; border-bottom: 1px solid var(--edge-2);
}
.inv-items tbody td { padding: 0.5rem 0.55rem; border-bottom: 1px solid var(--edge); vertical-align: top; }
.inv-items .num, .inv-totals .num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-sl { width: 34px; color: var(--ink-4); }
.inv-hsn { width: 92px; font-family: var(--bs-font-monospace); font-size: 0.74rem; color: var(--ink-3); }
.inv-item { font-weight: 600; color: var(--ink); }
.inv-qty, .inv-rate, .inv-items .inv-amount { font-family: var(--bs-font-monospace); white-space: nowrap; }
/* the alternate unit Tally packs into the same string, kept but subordinate */
.inv-alt { display: block; font-size: 0.7rem; color: var(--ink-4); }
.inv-per { color: var(--ink-4); }
.inv-noitems { font-size: 0.85rem; color: var(--ink-3); font-style: italic; }

/* ── the money: one narrow column, hard right ── */
.inv-money { display: flex; flex-direction: column; align-items: flex-end; margin-top: 1rem; }
.inv-totals { border-collapse: collapse; min-width: 340px; font-size: 0.86rem; }
.inv-totals th {
  text-align: left; font-weight: 500; color: var(--ink-3);
  padding: 0.3rem 1.2rem 0.3rem 0.55rem;
}
.inv-totals td { padding: 0.3rem 0.55rem; font-family: var(--bs-font-monospace); white-space: nowrap; }
.inv-subtotal th, .inv-itemsline th { font-weight: 700; color: var(--ink); }
.inv-subtotal td, .inv-itemsline td { font-weight: 700; color: var(--ink); }
.inv-subtotal, .inv-itemsline { border-bottom: 1px solid var(--edge-2); }
.inv-total th, .inv-total td {
  border-top: 2px solid var(--ink); font-size: 1.05rem; font-weight: 700;
  color: var(--ink); padding-top: 0.5rem;
}

/* the honest flag: the lines add to one number, Tally recorded another */
.inv-unreconciled {
  align-self: stretch; margin: 1rem 0 0; padding: 0.6rem 0.8rem;
  border: 1px solid var(--rust); border-left-width: 4px; border-radius: 8px;
  background: rgba(168, 67, 29, 0.08); color: var(--rust-ink);
  font-size: 0.82rem; font-weight: 500;
}

/* ── the sub-ledger and the words ── */
.inv-refs, .inv-remarks { margin-top: 1.4rem; }
.inv-ref {
  display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: baseline;
  font-size: 0.82rem; padding: 0.35rem 0; border-bottom: 1px solid var(--edge);
}
.inv-ref:last-child { border-bottom: 0; }
.inv-ref-bill { font-family: var(--bs-font-monospace); font-weight: 700; color: var(--ink); }
.inv-ref-type, .inv-ref-date, .inv-ref-terms { color: var(--ink-3); }
.inv-ref-terms { font-weight: 600; }
.inv-ref-amount { margin-left: auto; font-family: var(--bs-font-monospace); }
.inv-remarks p { margin: 0; font-size: 0.86rem; color: var(--ink-2); }

/* ── the bills list: a whole row that opens its invoice ──
   The overlay, not a wrapping anchor: the number cell has its own link out to
   the raw voucher, and an anchor cannot contain another one. */
.vd-row.vd-doc { position: relative; }
.vd-doc .vd-open::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.vd-doc .vd-number a { position: relative; z-index: 1; }
.vd-items { color: var(--ink-3); font-family: var(--bs-font-monospace); font-size: 0.78rem; }
.vd-bank, .vd-ref { color: var(--ink-3); font-size: 0.8rem; }
.vd-ref { font-family: var(--bs-font-monospace); font-size: 0.74rem; }

.vd-chip {
  font-size: 0.68rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 999px;
  border: 1px solid var(--edge-2); background: var(--well); color: var(--ink-3);
  white-space: nowrap;
}
.vd-chip--open { border-color: var(--rust); color: var(--rust-ink); background: rgba(168, 67, 29, 0.09); }
.vd-chip--settled { border-color: var(--green); color: var(--green-ink); background: rgba(47, 107, 63, 0.1); }

/* ── the summary strip on the customer's profile ── */
.cust-strip { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.2rem; }
.cust-strip a {
  display: flex; align-items: baseline; gap: 0.55rem; text-decoration: none;
  border: 1px solid var(--edge-2); border-radius: 10px; background: var(--panel);
  padding: 0.55rem 0.9rem; color: var(--ink-2); min-width: 210px;
}
.cust-strip a:hover { border-color: var(--green); background: var(--rail); }
.cust-strip__n { font-size: 1.2rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cust-strip__what { font-size: 0.8rem; color: var(--ink-3); }
.cust-strip__sum {
  margin-left: auto; font-family: var(--bs-font-monospace); font-size: 0.8rem; color: var(--ink-3);
}

/* ── on paper ──
   Everything that is navigation, and everything that is a control, comes off:
   what is left is the sheet, edge to edge, in black. */
@media print {
  .topbar, .sidebar, .sidebar-backdrop, .section-switcher, .footer,
  .breadcrumb, .page-header, .inv-chrome, .alert, .flash-messages { display: none !important; }

  body, .main-wrapper, .content-wrapper, .container {
    background: #fff !important; margin: 0 !important; padding: 0 !important;
    max-width: none !important; width: auto !important;
  }

  .inv {
    background: #fff; border: 0; border-radius: 0; padding: 0; max-width: none;
    color: #000; font-size: 11pt;
  }
  .inv-head { border-bottom-color: #000; }
  .inv-book-short, .inv-number, .inv-to-name, .inv-item, .inv-total th, .inv-total td { color: #000; }
  .inv-kind { background: none; border-color: #666; color: #333; }
  .inv-items thead th { background: none; border-bottom: 1px solid #000; color: #333; }
  .inv-items tbody td, .inv-ref { border-bottom: 1px solid #ccc; }
  .inv-total th, .inv-total td { border-top: 2px solid #000; }
  .inv-unreconciled { border-color: #000; background: none; color: #000; }
  .inv-to-tax code { background: none; }

  /* A table that breaks mid-row across a page boundary is unreadable. */
  .inv-items tr, .inv-totals tr, .inv-ref { break-inside: avoid; }
  .inv-money { break-inside: avoid; }
}