*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ──────────────────────────────────────────────────────────────────────────
   CSS CUSTOM PROPERTIES — STRICT TYPOGRAPHY SYSTEM
   Single source of truth for fonts, sizes, line-heights.
   No hardcoded typography values are permitted anywhere outside :root.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Colours — rulebook §4 */
  --ink:       #222222;
  --ink-mid:   #555555;
  --ink-light: #777777;
  --border:    #e8e8e8;
  --border-focus: #999;
  --surface:   #ffffff;
  --bg:        #f5f5f5;
  --lh-opacity: 0.12;

  /* ── FONT FAMILIES ── single unified stack */
  --font-heading: Arial, Helvetica, sans-serif;
  --font-body:    Arial, Helvetica, sans-serif;
  --font-mono:    Arial, Helvetica, sans-serif;

  /* Backwards-compat aliases */
  --font: var(--font-body);
  --mono: var(--font-body);

  /* ── FONT SIZE SCALE ── only these allowed values (protocol §3) */
  --fs-8:  8px;
  --fs-9:  9px;
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;

  /* ── LINE HEIGHTS ── only these three (protocol-mandated) */
  --lh-tight:  1.15;
  --lh-normal: 1.35;
  --lh-loose:  1.6;
}

/* ── SCREEN BODY ── */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
}

/* ── GLOBAL SELECT: remove all dropdown arrows ── */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 8px 5px;
  padding-right: 22px !important;
}

/* ── TOOLBAR (screen only) ── */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toolbar-brand {
  font-family: var(--font-heading);
  font-size: var(--fs-12);
  font-weight: 700;
  color: #555;
}
.toolbar-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--ink-mid);
  white-space: nowrap;
  transition: background 0.1s;
}
.btn:hover { background: #f0f0f0; }
.btn-primary { background: #222; color: #fff; border-color: #222; }
.btn-primary:hover { background: #444; }
.btn-success { background: #166534; color: #fff; border-color: #166534; }
.btn-success:hover { background: #15803d; }
.btn svg { width: 13px; height: 13px; }

/* Letterhead controls */
.lh-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
  padding-right: 10px;
  border-right: 1px solid var(--border);
}
.lh-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: var(--fs-10);
  color: var(--ink-mid);
  cursor: pointer;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.lh-toggle-wrap input[type="checkbox"] {
  appearance: none;
  width: 26px; height: 14px;
  background: var(--border);
  border-radius: 7px;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
}
.lh-toggle-wrap input[type="checkbox"]:checked { background: #444; }
.lh-toggle-wrap input[type="checkbox"]::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  background: #fff;
  border-radius: 50%;
  top: 2px; left: 2px;
  transition: left 0.2s;
}
.lh-toggle-wrap input[type="checkbox"]:checked::after { left: 14px; }
.lh-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-family: var(--font-body);
  font-size: var(--fs-10);
  color: var(--ink-mid);
  border: 1px dashed var(--border);
  border-radius: 4px;
  cursor: pointer;
}
#lh-file-input { display: none; }
.lh-opacity-wrap { display: flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: var(--fs-10); color: var(--ink-mid); }
.lh-opacity-wrap input[type="range"] { width: 60px; accent-color: #444; }

/* ── TOKEN INDICATOR ── */
.token-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--fs-10);
  padding: 4px 9px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink-mid);
  white-space: nowrap;
  transition: background 0.1s;
}
.token-indicator:hover { background: #f0f0f0; }
.token-indicator.token-set { border-color: #166534; color: #166534; background: #f0fdf4; }
.token-indicator.token-set:hover { background: #dcfce7; }
.token-indicator svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ── LETTERHEAD ── */
body.letterhead-on { position: relative; }
body.letterhead-on::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--lh-bg-image, none);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: var(--lh-opacity);
  pointer-events: none;
  z-index: 0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

@media print {
  body.letterhead-on::before {
    position: fixed;
    top: -0.625in;
    left: -0.625in;
    right: -0.625in;
    bottom: -0.625in;
    width: calc(100% + 1.25in);
    height: calc(100% + 1.25in);
    background-size: 100% 100%;
    background-position: top left;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ── INVOICE SHEET (the single continuous document) ── */
.invoice-sheet {
  max-width: 210mm;
  margin: 16px auto;
  background: #fff;
  border: 1px solid #bbb;
  padding: 0 0 16px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 4px;
}
/* Body content inside sheet gets side padding (not the header/footer bands) */
.inv-sheet-body {
  padding: 0 22px;
}

/* ── HEADER: COA-style light green band ── */
.inv-header {
  background: #eaf4ef;
  border-bottom: 2px solid #0f3622;
  border-radius: 3px 3px 0 0;
  margin-bottom: 0;
  padding: 10px 14px 9px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.inv-header-left { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; }
.inv-header-right { text-align: right; flex-shrink: 0; }

/* Logo slot inside header */
.inv-logo-slot {
  width: 46px; height: 46px;
  background: rgba(15,54,34,0.08);
  border: 1px solid rgba(15,54,34,0.20);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden; cursor: pointer;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.inv-logo-slot:hover { background: rgba(15,54,34,0.14); }
.inv-logo-slot img { width:100%; height:100%; object-fit:contain; }
.inv-logo-slot-placeholder { opacity: 0.35; }

.inv-header-text { flex: 1; min-width: 0; }

.company-name-input {
  font-family: var(--font-heading);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: #0f3622;
  -webkit-text-fill-color: #0f3622;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 1px 4px;
  width: 100%;
  outline: none;
  display: block;
}
.company-name-input:hover { border-color: #7bbfa0; background: rgba(15,54,34,0.05); }
.company-name-input:focus { border-color: #1f7a4e; background: rgba(15,54,34,0.07); }

.company-addr {
  font-family: var(--font-body);
  font-size: var(--fs-9);
  font-weight: 400;
  color: #3a6b52;
  line-height: var(--lh-loose);
  margin-top: 3px;
  padding: 0 4px;
}

/* CIN/GST line — inside light green band */
.cin-line {
  font-family: var(--font-body);
  font-size: var(--fs-10);
  font-weight: 400;
  color: #3a6b52;
  margin-top: 2px;
  padding: 0 4px;
}
.cin-line input {
  font-family: var(--font-body);
  font-size: var(--fs-10);
  font-weight: 400;
  color: #3a6b52;
  -webkit-text-fill-color: #3a6b52;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 1px 3px;
  outline: none;
  width: 230px;
}
.cin-line input:hover { border-color: #7bbfa0; }
.cin-line input:focus { border-color: #1f7a4e; background: rgba(15,54,34,0.05); color: #0f3622; -webkit-text-fill-color: #0f3622; }

/* Badges — right side, dark green on light green */
.company-badges {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  margin-bottom: 6px;
}
.badge {
  font-family: var(--font-heading);
  font-size: var(--fs-8);
  font-weight: 700;
  line-height: var(--lh-tight);
  padding: 2px 5px;
  border: 1px solid #7bbfa0;
  border-radius: 2px;
  color: #0f3622;
  background: rgba(15,54,34,0.10);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Invoice title — dark green box */
.inv-title-input {
  font-family: var(--font-heading);
  font-size: var(--fs-10);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-align: center;
  background: #0f3622;
  border: 1px solid #0f3622;
  border-radius: 2px;
  padding: 4px 10px;
  width: auto;
  min-width: 180px;
  outline: none;
  display: block;
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.inv-title-input:hover { background: #1a5c3a; border-color: #1a5c3a; }
.inv-title-input:focus { background: #1a5c3a; border-color: #1f7a4e; }

/* Meta table inside light green band */
.inv-meta-table {
  margin-top: 5px;
  font-family: var(--font-body);
  font-size: var(--fs-10);
  line-height: var(--lh-normal);
  border-collapse: collapse;
  margin-left: auto;
}
.inv-meta-table td { padding: 2px 4px; vertical-align: middle; line-height: var(--lh-normal); }
.inv-meta-table td:first-child {
  font-family: var(--font-body);
  font-size: var(--fs-10);
  font-weight: 400;
  color: #5a8a6e;
  text-align: right;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: var(--lh-normal);
}
.inv-meta-table td:last-child {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  color: #0f3622;
  line-height: var(--lh-normal);
  font-variant-numeric: tabular-nums;
}
.inv-meta-table input {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: #0f3622;
  -webkit-text-fill-color: #0f3622;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 1px 4px;
  width: 150px;
  text-align: right;
  outline: none;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.inv-meta-table input:hover { border-color: #7bbfa0; background: rgba(15,54,34,0.05); }
.inv-meta-table input:focus { border-color: #1f7a4e; background: rgba(15,54,34,0.07); }

/* Green accent line below header band */
.inv-header-accent {
  height: 2px;                  /* whole-pixel — no fractional values */
  background: linear-gradient(90deg, #1f7a4e 0%, #7bbfa0 50%, #1f7a4e 100%);
  margin-bottom: 8px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ── PRINT FOOTER ── */
/* ── PRINT FOOTER — dark green rule + light green tagline band ── */
.inv-print-footer {
  display: none; /* hidden on screen — only shows in print */
  margin-top: 8px;
  border-radius: 0 0 2px 2px;
  overflow: hidden;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.inv-print-footer-band {
  background: #eaf4ef;
  border-top: 3px solid #0f3622;
  padding: 5px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.inv-footer-left, .inv-footer-right {
  font-family: var(--font-body);
  font-size: var(--fs-8);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: #3a6b52;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── PARTY + TRANSPORT ROW ── */
.party-transport {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid #d4d4d4;
  margin-bottom: 6px;
}
.party-col, .transport-col {
  padding: 6px 10px;
}
.party-col { border-right: 1px solid #d4d4d4; }

.section-label {
  font-family: var(--font-heading);
  font-size: var(--fs-9);
  font-weight: 700;
  line-height: var(--lh-normal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #555;
  border-bottom: 1px solid #d4d4d4;
  padding-bottom: 3px;
  margin-bottom: 4px;
}

.field-row {
  display: flex;
  align-items: center;          /* SAME OPTICAL BASELINE for mono + sans */
  gap: 8px;
  margin-bottom: 0;
  min-height: 20px;
}
.field-key {
  font-family: var(--font-body);
  font-size: var(--fs-11);      /* Protocol §8: labels = 11px Arial 600 */
  font-weight: 600;
  line-height: 1.2;
  color: #555;
  white-space: nowrap;
  width: 96px;
  flex-shrink: 0;
  padding-right: 6px;
}
.field-val {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  line-height: 1.2;
  color: #222;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 1px 4px;
  width: 100%;
  flex: 1 1 auto;
  outline: none;
}
.field-val:hover { background: #fafafa; border-color: transparent; }
.field-val:focus { border-color: #999; background: #fff; }
.field-val::placeholder { color: #bbb; }
/* Mono variant — codes (GSTIN, LR No., A/c, IFSC) — unified Arial 400 11px */
.field-val.mono {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  line-height: var(--lh-normal); /* same line-height keeps baseline aligned */
}
textarea.field-val { resize: none; line-height: var(--lh-normal); overflow: hidden; }
select.field-val { cursor: pointer; }

/* ── ITEMS TABLE ── */
.items-wrap { margin-bottom: 0; position: relative; }

table.items {
  width: 100%;
  table-layout: fixed;       /* CRITICAL: locks columns identically across screen + print */
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-11);
  line-height: var(--lh-normal);
  border: 1px solid #d4d4d4;
}
table.items thead tr {
  background: #f0f0f0;
  border-bottom: 2px solid #999;
}
table.items thead th {
  padding: 7px 6px 6px;
  text-align: left;
  vertical-align: middle;
  font-family: var(--font-heading);
  font-size: var(--fs-9);
  font-weight: 700;
  line-height: var(--lh-normal);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #555;
  white-space: nowrap;
  border-right: 1px solid #d0d0d0;
  background: #f0f0f0;
}
table.items thead th:last-child { border-right: none; }
table.items thead th.num { text-align: center; padding-right: 6px; }
table.items thead th.num-last { text-align: center; padding-right: 6px; }
table.items thead th.ctr-col { text-align: center; }

table.items tbody tr { border-bottom: 1px solid #e8e8e8; }
table.items tbody td {
  padding: 4px 5px;
  vertical-align: middle;
  border-right: 1px solid #e8e8e8;
  line-height: var(--lh-normal);
  font-size: 11px;
  color: #222;
}
table.items tbody td:last-child { border-right: none; text-align: center; padding: 0; width: 28px; min-width: 28px; max-width: 28px; }
table.items tbody td.sno {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--ink-light);
  text-align: center;
  width: 28px;
}

/* Default text input inside table cells (Name of Item) */
.td-input {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: #222;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 2px 4px;
  width: 100%;
  outline: none;
}
.td-input:hover { background: #fafafa; }
.td-input:focus { border-color: #999; background: #fff; }
.td-input.num { text-align: right; font-family: var(--font-body); font-weight: 400; font-variant-numeric: tabular-nums; }
.td-input.ctr { text-align: center; }

/* Numeric input cells (Qty, Rate) — IDENTICAL typography to .td-amount + .tfoot-num.
   This is what gives the Amount column its perfect vertical rhythm. */
.td-input.item-qty,
.td-input.item-rate {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  line-height: var(--lh-normal);
  text-align: right !important;
  padding: 2px 4px 2px 2px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.td-input.item-qty::-webkit-outer-spin-button,
.td-input.item-qty::-webkit-inner-spin-button,
.td-input.item-rate::-webkit-outer-spin-button,
.td-input.item-rate::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
table.items tbody td:has(.item-qty),
table.items tbody td:has(.item-rate) {
  text-align: right;
  vertical-align: middle;
}
table.items tbody td:has(.item-type) {
  text-align: center;
  vertical-align: middle;
}
select.td-input {
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  text-align: center;
  text-align-last: center;
  -webkit-text-align-last: center;
  background-image: none !important;
  padding-right: 4px !important;
  padding-left: 4px !important;
}

/* Static Amount cell — IDENTICAL typography to .tfoot-num and totals .trow-val.
   Width is locked so digits sit at the same x-coordinate on every row.
   Padding 6px top/bottom matches the (td 4px + input 2px) compound padding
   of qty/rate cells, giving uniform row heights across the table. */
.td-amount {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  line-height: var(--lh-normal);
  text-align: right !important;
  padding: 6px 6px 6px 4px;
  white-space: nowrap;
  width: 104px;
  min-width: 104px;
  max-width: 104px;
  color: #222;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* tfoot Total row — same exact font/size/weight/align as .td-amount */
.tfoot-num {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  line-height: var(--lh-normal);
  text-align: right !important;
  padding: 4px 6px 4px 4px;
  white-space: nowrap;
  color: #222;
  vertical-align: middle;
  border-right: 1px solid #d0d0d0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
#tfoot-total-qty { width: 74px; min-width: 74px; max-width: 74px; }
#items-tfoot td.tfoot-num:last-of-type { border-right: none; }
#items-tfoot td { background: #fafafa; }

/* Tfoot "Total" label cell — sits over the first 4 (text) columns */
.tfoot-total-label {
  font-family: var(--font-heading);
  font-size: var(--fs-9);
  font-weight: 700;
  line-height: var(--lh-normal);
  color: #555;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px 4px 4px;
  vertical-align: middle;
  border-right: 1px solid #d0d0d0;
  background: #fafafa;
}
/* Empty Rate cell in tfoot — same metrics, just muted */
.tfoot-num-mute { color: var(--ink-light) !important; }

/* Item name cell: allow wrapping */
.item-name-wrap {
  position: relative;
  min-width: 0;
}
.item-name {
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  min-width: 0;
  width: 100%;
}
/* Name-of-item td: allow it to flex and not squeeze */
table.items tbody td.item-name-wrap {
  word-break: break-word;
  overflow-wrap: break-word;
  min-width: 120px;
}

.del-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #bbb;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 26px;
  height: 100%;
}
.del-btn:hover { color: #cc0000; }
.del-btn svg { width: 11px; height: 11px; }

.add-row-btn {
  margin-top: 5px;
  background: none;
  border: 1px dashed var(--border);
  border-radius: 3px;
  padding: 4px 12px;
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  color: var(--ink-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}
.add-row-btn:hover { border-color: #888; color: #444; }
.add-row-btn svg { width: 11px; height: 11px; }

/* Product typeahead dropdown */
.pd-item {
  padding: 5px 9px;
  font-family: var(--font-body);
  font-size: var(--fs-11);
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  line-height: var(--lh-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-item:last-child { border-bottom: none; }
.pd-hover, .pd-item:hover { background: #f0f5ff !important; }

/* ── TOTALS + REMARKS BELOW TABLE ── */
.below-table {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 0;
  border: 1px solid #d4d4d4;
  border-top: none;
  margin-bottom: 8px;
}
.below-left {
  padding: 6px 8px;
  border-right: 1px solid #d4d4d4;
}
.below-right { padding: 6px 8px; }

.gst-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}
.toggle-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  color: var(--ink-mid);
  cursor: pointer;
}
.toggle {
  appearance: none;
  width: 28px; height: 15px;
  background: var(--border);
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
}
.toggle:checked { background: #333; }
.toggle::after {
  content: '';
  position: absolute;
  width: 11px; height: 11px;
  background: #fff;
  border-radius: 50%;
  top: 2px; left: 2px;
  transition: left 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.toggle:checked::after { left: 15px; }

.gst-rate-input {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  width: 50px;
  text-align: right;
  outline: none;
}
.gst-rate-input:focus { border-color: #999; }

/* Inline label for GST rate % control */
.gst-rate-label {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--ink-mid);
}

/* Micro-label for Note/Remarks etc. */
.micro-label {
  font-family: var(--font-body);
  font-size: var(--fs-9);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--ink-light);
  margin-bottom: 2px;
  margin-top: 4px;
}

.remarks-area {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  color: var(--ink-mid);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 2px 4px;
  width: 100%;
  outline: none;
  resize: none;
  line-height: var(--lh-normal);
  margin-top: 4px;
}
.remarks-area:hover { background: #fafafa; }
.remarks-area:focus { border-color: #999; background: #fff; }

.amount-words {
  font-family: var(--font-body);
  font-size: var(--fs-10);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--ink-mid);
  font-style: italic;
  margin-top: 5px;
  padding: 5px 6px;             /* equal top/bottom for vertical balance */
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fafafa;
  min-height: 32px;
  display: flex;
  align-items: center;          /* center text vertically — no flex-end jump */
}

.bank-details-block {
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  background: #f9fcfa;
  font-family: var(--font-body);
  font-size: var(--fs-11);
  line-height: var(--lh-normal);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.bank-details-block .bd-title {
  font-family: var(--font-heading);
  font-size: var(--fs-9);
  font-weight: 700;
  line-height: var(--lh-normal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0f3622;
  margin-bottom: 3px;
  border-bottom: 1px solid #c8e0d4;
  padding-bottom: 2px;
}
.bank-details-block .bd-row {
  display: flex;
  align-items: center;          /* baseline alignment for label + mono value */
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--ink-mid);
  min-height: 16px;
}
.bank-details-block .bd-key {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  color: var(--ink-light);
  min-width: 60px;
  flex-shrink: 0;
}
.bank-details-block .bd-val {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--ink);
}

/* totals right column — numeric values use the IDENTICAL typography
   as .td-amount / .tfoot-num so the "Amount" column on the table
   and the "Subtotal/Total Sale Value/Total Amount" stack on the right
   sit at the same baseline rhythm and the same digit width. */
.trow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid #eeeeee;
  gap: 8px;
}
.trow:last-child { border-bottom: none; }
.trow-label {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: #222;
  white-space: nowrap;
  flex-shrink: 0;
}
.trow-val {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: #222;
  text-align: right;
  white-space: nowrap;
  min-width: 104px;
  width: 104px;
  padding-right: 6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.trow-freight-input {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 2px 5px;
  width: 104px;
  min-width: 104px;
  text-align: right;
  outline: none;
  font-variant-numeric: tabular-nums;
}
.trow-freight-input:hover { background: #fafafa; }
.trow-freight-input:focus { border-color: #999; background: #fff; }

/* Discount % inline input */
.trow-disc-pct {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 4px;
  width: 58px;
  text-align: right;
  outline: none;
}
.trow-disc-pct:focus { border-color: #999; }
#disc-row .trow-label { color: var(--ink-mid); }
#disc-row .trow-freight-input { color: var(--ink); }
.trow-sep { padding: 0; border-bottom: 1px dashed #ccc; margin: 2px 0; }
.trow-roundoff .trow-label,
.trow-roundoff.trow-label { font-size: var(--fs-10) !important; color: var(--ink-light) !important; }
.trow-roundoff .trow-val,
.trow-roundoff.trow-val  { font-size: var(--fs-10) !important; color: var(--ink-light) !important; font-family: var(--font-mono) !important; font-weight: 400 !important; }
.trow-final {
  border-top: 2px solid var(--ink);   /* protocol §8: 2px thicker top border */
  padding-top: 6px;
  padding-bottom: 6px;                /* equal vertical padding for optical balance */
  margin-top: 4px;
  border-bottom: none;
}
.trow-final .trow-label {
  font-family: var(--font-heading);
  font-size: var(--fs-11);            /* Arial 700 11px label per protocol §8 */
  font-weight: 700;
  line-height: var(--lh-normal);
  color: var(--ink);
}
.trow-final .trow-val {
  font-family: var(--font-body);
  font-size: var(--fs-14);            /* Arial 700 14px Grand Total per protocol §6/§8 */
  font-weight: 700;
  line-height: var(--lh-normal);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ── TERMS + SIGNATURE ── */
.terms-sig {
  border: 1px solid #d4d4d4;
  display: grid;
  grid-template-columns: 1fr 180px;
  margin-bottom: 8px;
}
.terms-col { padding: 6px 8px; border-right: 1px solid #d4d4d4; }
.sig-col {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
}
.sig-space { flex: 1; min-height: 36px; }
.sig-line { border-top: 1px solid var(--ink); margin-bottom: 4px; }
.sig-label {
  font-family: var(--font-body);
  font-size: var(--fs-10);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--ink-mid);
}
.sig-company {
  font-family: var(--font-body);
  font-size: var(--fs-9);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--ink-light);
}

.terms-list { list-style: none; }
.terms-list li {
  display: flex;
  gap: 5px;
  font-family: var(--font-body);
  font-size: var(--fs-9);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--ink-mid);
  align-items: flex-start;
  margin-bottom: 2px;
}
.term-num {
  font-family: var(--font-body);
  font-size: var(--fs-8);
  font-weight: 400;
  color: #777;
  margin-top: 2px;
  flex-shrink: 0;
  width: 14px;
}
.term-text {
  font-family: var(--font-body);
  font-size: var(--fs-9);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--ink-mid);
  padding: 1px 3px;
  width: 100%;
  background: transparent !important;
  display: block;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  resize: none;
  overflow: hidden;
  cursor: default;
  user-select: text;
  -webkit-user-select: text;
}

/* ── STATUS BAR (screen only) ── */
.status-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: #166534;
  max-width: 210mm;
  margin: 0 auto 20px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.status-bar.status-warn   { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.status-bar.status-danger { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.status-bar.status-ok     { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }

/* ── REPORT TABLE ROW HOVER (replaces inline onmouseover/out) ── */
#rpt-tbody tr:hover { background: #eef4ff !important; }
#rpt-tbody tr.rpt-selected { background: #dbeafe !important; }

/* ── PRINT WATERMARK (print-only) ── */
@media print {
  body::after {
    content: 'PROFORMA INVOICE';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-20deg);
    font-family: var(--font-heading);
    font-size: 72px;
    font-weight: 700;
    color: rgba(0,0,0,0.06);
    letter-spacing: 0.08em;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ── PRINT ── */
/* Print-only logo slot — hidden on screen, shown only in @media print */
#inv-logo-print-slot { display: none; }

@page {
  size: A4;
  margin: 0.28in 0.38in;
}

@media print {
  /* ──────────────────────────────────────────────────────────────────────
     PRINT TYPOGRAPHY — IDENTICAL to screen (protocol §8).
     We do NOT redefine font-family / font-size / line-height inside @media print.
     The screen typography system is the single source of truth.
     Only print-color-adjust, page-break, and layout-fidelity rules live here.
     ────────────────────────────────────────────────────────────────────── */
  body {
    background: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    margin: 0;
  }


  /* ── Hide all screen-only UI ── */
  .toolbar,
  .add-row-btn,
  .del-btn,
  .btn,
  .status-bar,
  .lh-controls,
  .gst-row,
  .no-print { display: none !important; }

  /* ── Hide delete column completely (no empty space) ── */
  table.items thead th:last-child,
  table.items tbody tr td:last-child { display: none !important; }

  /* ── Sheet layout ── */
  .invoice-sheet {
    max-width: 100%;
    margin: 0 !important;
    border: none !important;
    padding: 0 !important;
    /* page-break-inside: avoid was causing content clipping for >15-item invoices.
       Allow natural pagination; per-row page-break-inside: avoid (below) handles row integrity. */
    overflow: visible !important;
  }

  /* ── Print: LIGHT green header (same as screen) ── */
  .inv-header {
    background: #eaf4ef !important;
    border-bottom: 2px solid #0f3622 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    border-radius: 0 !important;
    padding: 7px 12px 7px !important;
  }
  .inv-header-accent {
    background: linear-gradient(90deg, #1f7a4e 0%, #7bbfa0 50%, #1f7a4e 100%) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .company-name-input { -webkit-text-fill-color: #0f3622 !important; color: #0f3622 !important; }
  .company-addr { color: #3a6b52 !important; -webkit-text-fill-color: #3a6b52 !important; }
  .cin-line { color: #3a6b52 !important; font-weight: 400 !important; }
  .cin-line input { -webkit-text-fill-color: #3a6b52 !important; color: #3a6b52 !important; }
  .badge {
    background: rgba(15,54,34,0.10) !important;
    border-color: #7bbfa0 !important;
    color: #0f3622 !important;
    -webkit-text-fill-color: #0f3622 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .inv-title-input {
    background: #0f3622 !important;
    border-color: #0f3622 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .inv-meta-table td:first-child { color: #5a8a6e !important; -webkit-text-fill-color: #5a8a6e !important; }
  .inv-meta-table td:last-child,
  .inv-meta-table input { color: #0f3622 !important; -webkit-text-fill-color: #0f3622 !important; }

  /* Logo — hide screen slot (with X button), show print-only slot */
  #inv-logo-slot-wrap { display: none !important; }
  #inv-logo-print-slot { display: block !important; }

  /* ── Print footer: show the green footer band ── */
  .inv-print-footer {
    display: block !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .inv-print-footer-band {
    background: #eaf4ef !important;
    border-top: 3px solid #0f3622 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .inv-footer-left, .inv-footer-right {
    color: #3a6b52 !important;
    -webkit-text-fill-color: #3a6b52 !important;
  }

  /* ── Strip interactive/hover styling from body fields ── */
  .inv-header input {
    border: none !important; box-shadow: none !important;
    outline: none !important;
  }
  input:not(.inv-header *), textarea, select,
  .td-input, .field-val, .term-text, .remarks-area,
  .trow-freight-input, .gst-rate-input {
    border: none !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* ── term-text: ensure no edit UI in print ── */
  .term-text {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    resize: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: default !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* ── Remove ALL select dropdown arrows in print ── */
  select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: none !important;
    background-image: none !important;
    border: none !important;
    padding-right: 0 !important;
    color: var(--ink) !important;
  }

  /* ── TABLE: minimal print adjustments — typography inherits from screen.
     We only set table-layout, borders, padding, and column widths here.
     Font family / size / weight are NOT redefined — the screen rules apply. */
  table.items {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border: 1px solid #bbb !important;
  }
  /* Repeat header on each page when invoice spans multiple pages */
  table.items thead { display: table-header-group !important; }
  table.items tfoot { display: table-footer-group !important; }
  table.items thead tr {
    background: #efefef !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  table.items thead th {
    padding: 3px 4px !important;
    border: 1px solid #bbb !important;
    white-space: nowrap;
    overflow: hidden;
  }
  table.items tbody td {
    padding: 3px 4px !important;
    border: 1px solid #ccc !important;
    vertical-align: middle !important;
  }
  /* Item name cell: allow text to wrap, never truncate */
  table.items tbody td:nth-child(2) {
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
  }
  table.items tbody td:nth-child(2) input {
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
    height: auto !important;
  }
  /* Type cell (col 4): centered select */
  table.items tbody td:nth-child(4) { text-align: center !important; overflow: visible !important; }
  table.items tbody td:nth-child(4) select { text-align: center !important; text-align-last: center !important; width: 100% !important; }
  /* Qty cell (col 5): right-aligned, typography inherits from .td-input.item-qty (mono, fs-11, 700) */
  table.items tbody td:nth-child(5) { text-align: right !important; overflow: visible !important; }
  table.items tbody td:nth-child(5) input {
    text-align: right !important;
    width: 100% !important;
    overflow: visible !important;
    padding-right: 4px !important;
  }
  /* Rate cell (col 6): same treatment as Qty */
  table.items tbody td:nth-child(6) { text-align: right !important; overflow: visible !important; }
  table.items tbody td:nth-child(6) input {
    text-align: right !important;
    width: 100% !important;
    overflow: visible !important;
    padding-right: 4px !important;
  }
  table.items tbody tr { background: none !important; }

  /* Column widths for print — fixed-layout means these lock the digit alignment */
  table.items th:nth-child(1), table.items td:nth-child(1) { width: 22px !important; }
  table.items th:nth-child(2), table.items td:nth-child(2) { width: auto !important; }
  table.items th:nth-child(3), table.items td:nth-child(3) { width: 58px !important; }
  table.items th:nth-child(4), table.items td:nth-child(4) { width: 40px !important; }
  table.items th:nth-child(5), table.items td:nth-child(5) { width: 64px !important; text-align: right !important; }
  table.items th:nth-child(6), table.items td:nth-child(6) { width: 72px !important; text-align: right !important; }
  table.items th:nth-child(7), table.items td:nth-child(7) { width: 92px !important; text-align: right !important; }
  table.items th:nth-child(8), table.items td:nth-child(8) { width: 0 !important; display: none !important; }

  /* Amount + tfoot total — width locked; typography inherits from screen rules
     (.td-amount and .tfoot-num both already use mono / fs-11 / 700) */
  .td-amount {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: right !important;
    padding: 3px 6px 3px 4px !important;
  }
  .tfoot-num {
    text-align: right !important;
    padding: 3px 6px 3px 4px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    border: 1px solid #ccc !important;
    color: #000 !important;
  }
  #tfoot-total-qty { width: 64px !important; min-width: 64px !important; max-width: 64px !important; }
  #items-tfoot tr { background: #f5f5f5 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Section borders */
  .party-transport, .below-table, .terms-sig {
    border: 1px solid #bbb !important;
  }
  .party-col { border-right: 1px solid #bbb !important; }
  .below-left { border-right: 1px solid #bbb !important; }
  .terms-col { border-right: 1px solid #bbb !important; }
  .section-label { border-bottom: 1px solid #ccc !important; }

  /* Totals — right align, no red on discount */
  .trow { border-bottom: 1px solid #eee !important; }
  .trow-val { min-width: 92px !important; width: 92px !important; text-align: right !important; }
  .trow-freight-input { width: 92px !important; text-align: right !important; border: none !important; background: transparent !important; }
  .trow-final { border-top: 2px solid #000 !important; }
  .trow-final .trow-label, .trow-final .trow-val { color: #000 !important; }
  /* Discount row — muted text (no red) */
  #disc-row .trow-label { color: #555 !important; }

  /* Bank details */
  .bank-details-block {
    background: #f9fcfa !important;
    border: 1px solid #ccc !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .bank-details-block .bd-title {
    color: #0f3622 !important;
    -webkit-text-fill-color: #0f3622 !important;
    border-bottom-color: #c8e0d4 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Amount words */
  .amount-words {
    border: 1px solid #ccc !important;
    background: #fafafa !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Disc row: hide % input, show static value span */
  .trow-disc-pct { display: none !important; }
  .trow-disc-pct-print { display: inline !important; }
  #disc-row:has(.trow-freight-input:placeholder-shown) { display: none !important; }

  /* Signature */
  #sig-img-wrap { display: block !important; }
  #sig-img { display: block !important; width: 120px !important; height: auto !important; max-height: 60px !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Suppress placeholder text in print */
  .remarks-area:placeholder-shown { visibility: hidden; }
  #amount-words-display:empty { display: none; }

  /* Fix 1: Remove date calendar icon in print */
  input[type="date"]::-webkit-calendar-picker-indicator {
    display: none !important;
    -webkit-appearance: none;
  }
  input[type="date"] {
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  /* If date input is empty, hide the browser's default placeholder text */
  input[type="date"]:not([value]):empty,
  input[type="date"][value=""] { color: transparent !important; -webkit-text-fill-color: transparent !important; }

  /* Fix 2: Hide all placeholder text in print */
  input::placeholder,
  textarea::placeholder {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }
  /* All filled inputs must show their value in black */
  input, textarea, select {
    color: #222 !important;
    -webkit-text-fill-color: #222 !important;
  }
  /* Exception: header inputs have their own color rules above */
  .company-name-input { -webkit-text-fill-color: #0f3622 !important; color: #0f3622 !important; }
  .cin-line input { -webkit-text-fill-color: #3a6b52 !important; color: #3a6b52 !important; }
  .inv-meta-table input { color: #0f3622 !important; -webkit-text-fill-color: #0f3622 !important; }
  .inv-title-input { color: #fff !important; -webkit-text-fill-color: #fff !important; }

  /* Prevent broken rows across pages */
  tr { page-break-inside: avoid; }
}

@media (max-width: 700px) {
  .party-transport { grid-template-columns: 1fr; }
  .party-col { border-right: none; border-bottom: 1px solid var(--border); }
  .below-table { grid-template-columns: 1fr; }
  .below-left { border-right: none; border-bottom: 1px solid var(--border); }
  .terms-sig { grid-template-columns: 1fr; }
  .terms-col { border-right: none; border-bottom: 1px solid var(--border); }
}