/* A4 invoice — mirrors the shop's sample receipt. Sizes are in mm/pt so print matches screen. */

.sheet {
  --ink: #3a3c4e;
  --line: #4a4d5f;
  --shade: #f3f3f4;
  box-sizing: border-box;
  width: 210mm;
  min-height: 296mm;
  padding: 11mm 15mm 18mm 16mm;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--ink);
  font-family: "Noto Sans", "Noto Sans Bengali", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 8pt;
  line-height: 1.35;
  text-align: left;
  transform-origin: top left;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.sheet *, .sheet *::before, .sheet *::after { box-sizing: border-box; }
.sheet b { font-weight: 700; }
.sheet .tk { font-size: 0.8em; font-family: "Noto Sans Bengali", "Noto Sans", sans-serif; }
.sheet .tk-lg { font-family: "Noto Sans Bengali", "Noto Sans", sans-serif; font-size: 1.1em; }
.sheet .r { text-align: right; }

.rc-title {
  margin: 0 0 3.6mm;
  text-align: center;
  font-size: 15.5pt;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.rc-box { border: 1px solid var(--line); }

.rc-th {
  display: flex;
  align-items: center;
  min-height: 6.4mm;
  padding: 0 1.1mm;
  background: var(--shade);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}

/* Shop header */
.rc-head {
  display: grid;
  grid-template-columns: 27.6mm 1fr;
  align-items: center;
  min-height: 28mm;
  padding: 3mm 4mm 3mm 5mm;
}
.rc-logo img { display: block; width: 18mm; height: 19.5mm; object-fit: contain; }
.rc-shopname { font-size: 20pt; font-weight: 700; line-height: 1.15; word-break: break-word; }
.rc-addr { margin-top: 1.5mm; font-size: 7.8pt; }
.rc-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; margin-top: 2.2mm; }

/* Bill to / invoice details */
.rc-parties { display: grid; grid-template-columns: 1fr 1fr; border-top: 0; }
.rc-parties > div + div { border-left: 1px solid var(--line); }
.rc-party { display: flex; flex-direction: column; gap: 1.9mm; min-height: 12.3mm; padding: 1.7mm 1.1mm 1.7mm; }

/* Items + summary */
.rc-table {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 2.5mm;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
}
.rc-items { flex: 1; display: flex; flex-direction: column; }
.rc-row { display: grid; grid-template-columns: 6.3% 39.6% 18.1% 17.9% 18.1%; }
.rc-row > div {
  display: flex;
  align-items: center;
  padding: 1mm 1.1mm;
  border-right: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.rc-row > div:last-child { border-right: 0; }
.rc-row > div.r { justify-content: flex-end; }
.rc-row.rc-th { display: grid; align-items: stretch; padding: 0; min-height: 7.1mm; }
.rc-item { min-height: 7.1mm; border-bottom: 1px solid var(--line); break-inside: avoid; }
.rc-sub { display: block; font-size: 7pt; font-weight: 400; margin-top: 0.3mm; }
.rc-fill { flex: 1; min-height: 6mm; }
.rc-total { min-height: 7.1mm; border-top: 1px solid var(--line); border-bottom: 2px solid var(--line); font-weight: 700; }
.rc-total > div { font-size: 8.4pt; }

.rc-line {
  display: grid;
  grid-template-columns: 35.2% auto 1fr;
  align-items: center;
  min-height: 6.4mm;
  padding: 0 1.1mm;
  border-bottom: 1px solid var(--line);
}
.rc-line.b { font-weight: 700; }
.rc-words-h { background: var(--shade); }
.rc-words { display: flex; align-items: center; min-height: 6.3mm; padding: 0 1.1mm; border-bottom: 1px solid var(--line); }
.rc-pay { padding: 0.7mm 0 0.9mm; }
.rc-pay .rc-line { min-height: 5mm; border-bottom: 0; }

/* Signature */
.rc-sign { width: 50%; margin: 2.5mm 0 0 auto; }
.rc-sign-body {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 19.7mm;
  padding-bottom: 1.4mm;
  font-size: 8.9pt;
}

/* ---------- Preview frame (screen) ---------- */
.sheet-frame { position: relative; overflow: hidden; width: 100%; }
.sheet-frame .sheet { position: absolute; top: 0; left: 0; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 12px 40px -12px rgba(15, 23, 42, .25); }

/* ---------- Printing ---------- */
#print-root { display: none; }

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

@media print {
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block !important; }
  #print-root .sheet { transform: none !important; box-shadow: none !important; }
}