/* Interactive invoice document. Sized in real millimetres so it prints at
   exact scale via the shared @page engine. On screen the doc scales to fit
   the preview column; at print it renders at its true mm size. */

/* The preview wrapper centres content. On screen we shrink the mm-sized doc
   with CSS `zoom` (JS sets --inv-scale to fit the column width). `zoom`
   actually shrinks the layout box — so the sheet never overflows the column
   and never triggers a horizontal scrollbar. Print resets zoom to 1 for exact
   mm output. */
#preview { display: block; width: 100%; }
/* Invoice preview is zoom-scaled to fit exactly — never scroll horizontally,
   and the panel hugs the sheet height (top-aligned, no big empty gap). */
.ps-preview-wrap { overflow-x: hidden; align-items: flex-start; height: auto; }

.inv-doc {
  /* mm dimensions set inline by JS (width/min-height). */
  box-sizing: border-box;
  background: #fff;
  color: #1f2937;
  font-family: Arial, Helvetica, sans-serif;
  padding: 14mm;
  margin: 0 auto;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  /* screen scaling (layout-affecting, so no overflow) */
  zoom: var(--inv-scale, 1);
  line-height: 1.35;
  --accent: #2563eb;
}

/* Editable fields: subtle on screen, invisible chrome on print. */
.inv-doc .edit {
  outline: none;
  min-height: 1em;
  border-radius: 2px;
  transition: background .1s;
}
.inv-doc .edit:hover { background: #f1f5ff; }
.inv-doc .edit:focus { background: #eaf1ff; box-shadow: 0 0 0 1px var(--accent); }
.inv-doc .edit:empty::before {
  content: attr(data-ph);
  color: #aab2bd;
}
.inv-doc .edit.small { font-size: 3.1mm; color: #374151; }
.inv-doc .edit.strong { font-weight: 700; }

/* ---- Header ---- */
.inv-head { display: flex; justify-content: space-between; gap: 8mm; align-items: flex-start; }
.inv-from { display: flex; gap: 5mm; align-items: flex-start; }
.inv-logobox {
  width: 34mm; height: 20mm; flex: none;
  border: 0.3mm dashed #c9ced6; border-radius: 1.5mm;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer; position: relative;
}
/* Once a logo image is in place, drop the placeholder border entirely. */
.inv-logobox.has-logo { border: none; border-radius: 0; }
.inv-logobox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.inv-logo-ph { color: #c0c5cd; font-size: 2.9mm; letter-spacing: .3mm; }
.inv-biz .biz-name { font-size: 4.6mm; font-weight: 800; letter-spacing: .2mm; }

.inv-title-wrap { text-align: right; min-width: 60mm; }
.inv-title { font-size: 9mm; font-weight: 800; letter-spacing: .8mm; color: var(--accent); }
.inv-meta { margin-left: auto; border-collapse: collapse; margin-top: 3mm; }
.inv-meta td { padding: 0.6mm 0 0.6mm 3mm; font-size: 3.2mm; vertical-align: bottom; }
.inv-meta td.ml { color: #374151; font-weight: 700; text-align: right; white-space: nowrap; }
.inv-meta td.edit { min-width: 26mm; border-bottom: 0.25mm solid #c9ced6; text-align: right; }

/* ---- Parties ---- */
.inv-parties { display: flex; gap: 6mm; margin-top: 8mm; }
.inv-party { flex: 1; border: 0.3mm solid #d7dee6; border-radius: 1.5mm; padding: 3mm 3mm 4mm; }
.pl { font-size: 2.5mm; letter-spacing: .3mm; color: #6b7280; font-weight: 700; margin-bottom: 1.5mm; }

/* ---- Items table ---- */
.inv-items { width: 100%; border-collapse: collapse; margin-top: 8mm; font-size: 3.2mm; }
.inv-items th {
  background: var(--accent); color: #fff; font-weight: 700; font-size: 3mm;
  text-align: left; padding: 2.4mm 2.5mm;
}
.inv-items th.c-qty, .inv-items th.c-tax { text-align: center; }
.inv-items th.c-price, .inv-items th.c-amt { text-align: right; }
.inv-items td { padding: 0; border-bottom: 0.25mm solid #d7dee6; vertical-align: middle; }
.inv-items tbody tr:nth-child(even) td { background: #f4f6f9; }
.inv-items .cell { padding: 2mm 2.5mm; outline: none; min-height: 5mm; }
.inv-items .c-qty .cell, .inv-items .c-tax .cell { text-align: center; }
.inv-items .c-price .cell, .inv-items .c-amt .cell { text-align: right; }
.inv-items td.c-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-items .cell:hover { background: #eef4ff; }
.inv-items .cell:focus { background: #e6efff; box-shadow: inset 0 0 0 1px var(--accent); }
.inv-items .cell:empty::before { content: attr(data-ph); color: #aab2bd; }
.inv-items td.c-amt .cell { color: #111827; }

/* delete-row button (screen only) */
.inv-items td.c-del { width: 7mm; text-align: center; }
.row-del {
  border: none; background: none; color: #cbd5e1; cursor: pointer;
  font-size: 4mm; line-height: 1; padding: 1mm;
}
.row-del:hover { color: #ef4444; }

/* Column widths */
.c-desc { width: 46%; }
.c-qty  { width: 10%; }
.c-price{ width: 16%; }
.c-tax  { width: 12%; }
.c-amt  { width: 16%; }

/* ---- Bottom: notes + totals ---- */
.inv-bottom { display: flex; gap: 6mm; margin-top: 6mm; align-items: flex-start; }
.inv-notes { flex: 1; }
.notes-body {
  border: 0.3mm solid #d7dee6; border-radius: 1.5mm; padding: 2.5mm;
  min-height: 24mm; font-size: 3.1mm; color: #374151;
}
.inv-totals { width: 62mm; border-collapse: collapse; }
.inv-totals td { padding: 1.8mm 2.5mm; font-size: 3.4mm; }
.inv-totals td.tl { color: #374151; font-weight: 700; }
.inv-totals td.tv { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-totals tr td { border-bottom: 0.25mm solid #e5e7eb; }
.inv-totals tr.grand td { background: var(--accent); color: #fff; font-weight: 800; font-size: 3.8mm; border: none; }

.btn.tiny { padding: 4px 10px; font-size: .8rem; margin-top: 6px; }

/* ---- Screen: keep the doc from overflowing the column ---- */
@media (max-width: 820px) {
  .inv-doc { padding: 10mm; }
}

/* ---- Print: exact mm, hide UI chrome ---- */
@media print {
  .site-header, .site-footer, .controls, .print-note, .ad-slot, .tool-copy, .no-print { display: none !important; }
  .container, .tool-layout, .preview-col, .ps-preview-wrap, #preview {
    display: block !important; margin: 0 !important; padding: 0 !important;
    max-width: none !important; width: auto !important; background: #fff !important;
    box-shadow: none !important; overflow: visible !important;
  }
  .inv-doc {
    zoom: 1 !important;
    transform: none !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
  /* placeholders must not print */
  .inv-doc .edit:empty::before,
  .inv-items .cell:empty::before,
  .inv-logo-ph { visibility: hidden !important; }
  .inv-items .cell:hover, .inv-items .cell:focus,
  .inv-doc .edit:hover, .inv-doc .edit:focus { background: transparent !important; box-shadow: none !important; }
  /* Don't print empty line-item rows. */
  .inv-items tr.row-empty { display: none !important; }
}