/* ════════════════════════════════════════
   CSS VARIABLES — Classic (default)
   Previously scoped to #inv-overlay, but html2canvas clones the capture
   target outside the overlay context during PDF export — vars failed to
   resolve, rendering a broken PDF. Scope by prefix (`--inv-*`) instead
   and define globally so computed styles work from any DOM position.
════════════════════════════════════════ */
:root {
  --inv-accent:        #374151;
  --inv-accent-dk:     #1F2937;
  --inv-accent-lt:     #F9FAFB;
  --inv-bg:            #E8E5DF;
  --inv-paper:         #FFFFFF;
  --inv-ink:           #111827;
  --inv-muted:         #6B7280;
  --inv-ghost:         #A0AEC0;
  --inv-border:        #E2E8F0;
  --inv-border-hover:  #CBD5E1;
  --inv-border-focus:  #374151;
  --inv-input-bg:      #F8FAFC;
  --inv-focus-ring:    rgba(55, 65, 81, 0.10);
  --inv-shadow:        0 1px 4px rgba(0,0,0,.05), 0 10px 32px rgba(0,0,0,.10);
  --inv-shadow-sm:     0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.06);
  --inv-r:             8px;
  --inv-sb:            236px;
  --inv-th-bg:         #1F2937;
  --inv-th-txt:        #FFFFFF;
  /* Semantic tokens */
  --inv-card-bg:       #FFFFFF;
  --inv-control-bg:    #FFFFFF;
  --inv-balance-bg:    #F3F4F6;
  --inv-balance-bdr:   #E5E7EB;
  --inv-row-sep:       #F3F4F6;
  --inv-hover-bg:      #FAFAFA;

  /* Back-compat aliases: original invoice CSS references var(--accent),
     var(--paper), etc. unchanged. Mirror the prefixed values so existing
     rules continue to work both inside the overlay AND during PDF export. */
  --accent:        var(--inv-accent);
  --accent-dk:     var(--inv-accent-dk);
  --accent-lt:     var(--inv-accent-lt);
  --paper:         var(--inv-paper);
  --ink:           var(--inv-ink);
  --ghost:         var(--inv-ghost);
  --border-hover:  var(--inv-border-hover);
  --border-focus:  var(--inv-border-focus);
  --input-bg:      var(--inv-input-bg);
  --focus-ring:    var(--inv-focus-ring);
  --shadow:        var(--inv-shadow);
  --shadow-sm:     var(--inv-shadow-sm);
  --r:             var(--inv-r);
  --sb:            var(--inv-sb);
  --th-bg:         var(--inv-th-bg);
  --th-txt:        var(--inv-th-txt);
  --card-bg:       var(--inv-card-bg);
  --control-bg:    var(--inv-control-bg);
  --balance-bg:    var(--inv-balance-bg);
  --balance-bdr:   var(--inv-balance-bdr);
  --row-sep:       var(--inv-row-sep);
  --hover-bg:      var(--inv-hover-bg);
}
/* IMPORTANT: don't redeclare --muted / --border / --bg at :root because the
   host site (main.css) already owns those. Scope those two to the invoice
   paper so they only override while the invoice is being rendered. */
.inv-paper, #inv-overlay, .pdf-mode {
  --muted:  var(--inv-muted);
  --border: var(--inv-border);
  --bg:     var(--inv-bg);
}

/* ════════════════════════════════════════
   THEME — Ink (dark)
   invoice-app.js sets data-theme="ink" on <html>, so match an ancestor.
════════════════════════════════════════ */
[data-theme="ink"] #inv-overlay {
  --accent:        #7C9CBF;
  --accent-dk:     #6A88AB;
  --accent-lt:     rgba(124,156,191,.12);
  --bg:            #0B1018;
  --paper:         #121C2A;
  --ink:           #DCE4F0;
  --muted:         #7A8EA8;
  --ghost:         #4F6070;
  --border:        #1E2E40;
  --border-hover:  #2E4255;
  --border-focus:  #7C9CBF;
  --input-bg:      #0D1722;
  --focus-ring:    rgba(124,156,191,.18);
  --shadow:        0 1px 4px rgba(0,0,0,.5), 0 10px 40px rgba(0,0,0,.55);
  --shadow-sm:     0 1px 3px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.3);
  --th-bg:         #0B1018;
  --th-txt:        #DCE4F0;
  /* Semantic tokens */
  --card-bg:       #172030;
  --control-bg:    #0D1722;
  --balance-bg:    #0B1018;
  --balance-bdr:   #1E2E40;
  --row-sep:       #192535;
  --hover-bg:      #192535;
}

/* ════════════════════════════════════════
   RESET & BASE
   Scoped to the overlay so the host page's typography/box-sizing is intact.
   `:where()` wraps the ID so the reset keeps zero specificity — the original
   universal reset `* { margin: 0 }` has (0,0,0); matching that lets every
   class-level padding/margin rule in this file still win.
════════════════════════════════════════ */
:where(#inv-overlay), :where(#inv-overlay) *, :where(#inv-overlay) *::before, :where(#inv-overlay) *::after { box-sizing: border-box; }
:where(#inv-overlay) *, :where(#inv-overlay) *::before, :where(#inv-overlay) *::after { margin: 0; padding: 0; }

:where(#inv-overlay) {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .25s, color .25s;
}

/* ════════════════════════════════════════
   APP LAYOUT
════════════════════════════════════════ */
.inv-app {
  display: flex;
  gap: 20px;
  max-width: 1108px;
  margin: 0 auto;
  padding: 32px 18px 80px;
  align-items: flex-start;
}
.inv-wrapper { flex: 1; min-width: 0; }

/* ════════════════════════════════════════
   INVOICE PAPER
════════════════════════════════════════ */
.inv-paper {
  background: var(--paper);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 44px 48px;
  transition: background .25s, box-shadow .25s;
}

/* ════════════════════════════════════════
   ON-PAPER INPUTS — always-visible borders
════════════════════════════════════════ */
.fi {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 8px 11px;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  background: var(--input-bg);
  transition: border-color .18s, background .18s, box-shadow .18s;
  line-height: 1.6;
}
.fi:hover  { border-color: var(--border-hover); background: var(--paper); }
.fi:focus  {
  outline: none;
  border-color: var(--border-focus);
  background: var(--paper);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.fi::placeholder { color: var(--ghost); }
textarea.fi { resize: vertical; }

select.fi {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
[data-theme="ink"] select.fi {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237A8EA8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════
   CUSTOM TOOLTIP
════════════════════════════════════════ */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) scale(.94);
  background: #111827;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s, transform .15s;
  z-index: 300;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  letter-spacing: 0;
}
[data-tip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #111827;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 300;
}
[data-tip]:hover::after  { opacity: 1; transform: translateX(-50%) scale(1); }
[data-tip]:hover::before { opacity: 1; }

[data-theme="ink"] [data-tip]::after  { background: #DCE4F0; color: #0B1018; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
[data-theme="ink"] [data-tip]::before { border-top-color: #DCE4F0; }

/* ════════════════════════════════════════
   SECTION LABEL
════════════════════════════════════════ */
.slbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}

/* ════════════════════════════════════════
   DIVIDER
════════════════════════════════════════ */
.cl-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 22px 0;
}

/* ════════════════════════════════════════
   ROW 1 — Logo + INVOICE title
════════════════════════════════════════ */
.cl-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

/* Circular logo */
.logo-zone {
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 2px dashed var(--border);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; cursor: pointer;
  color: var(--ghost); font-size: 10px; font-weight: 500;
  transition: border-color .2s, color .2s, background .2s;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.logo-zone:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-lt); }
.logo-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.logo-plus { font-size: 20px; line-height: 1; font-weight: 300; }
.logo-ph { display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none; }
.logo-zone img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%; display: none;
}
.logo-zone.has-logo .logo-ph { display: none; }
.logo-zone.has-logo img { display: block; }
.logo-zone.has-logo { border-style: solid; border-color: var(--border); }

/* INVOICE title */
.cl-title-col { text-align: right; }
.inv-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 52px;
  letter-spacing: 5px;
  color: var(--ink);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 6px;
}
.inv-num-row {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 6px; margin-bottom: 8px;
}
.inv-num-row > span { color: var(--muted); font-size: 14px; font-weight: 400; }
.inv-num-row input {
  width: 140px; text-align: right; font-size: 14px;
  padding: 6px 10px;
}

/* Status badge */
.status-row { display: flex; justify-content: flex-end; }
.status-badge {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 20px;
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; cursor: pointer;
  transition: opacity .15s; user-select: none;
}
.status-badge:hover { opacity: .75; }
.s-draft   { background: #F3F4F6; color: #6B7280; }
.s-sent    { background: #EFF6FF; color: #2563EB; }
.s-paid    { background: #ECFDF5; color: #059669; }
.s-overdue { background: #FEF2F2; color: #DC2626; }

[data-theme="ink"] .s-draft   { background: rgba(107,114,128,.18); color: #9CA3AF; }
[data-theme="ink"] .s-sent    { background: rgba(37,99,235,.18);   color: #93C5FD; }
[data-theme="ink"] .s-paid    { background: rgba(5,150,105,.18);   color: #6EE7B7; }
[data-theme="ink"] .s-overdue { background: rgba(220,38,38,.18);   color: #FCA5A5; }

/* ════════════════════════════════════════
   ROW 2 — Business info + Meta
════════════════════════════════════════ */
.cl-biz-meta {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.cl-biz-info { flex: 1; display: flex; flex-direction: column; gap: 6px; }

/* Business name input */
.biz-name-inp {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 8px 11px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  background: var(--input-bg);
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.biz-name-inp:hover { border-color: var(--border-hover); background: var(--paper); }
.biz-name-inp:focus {
  outline: none;
  border-color: var(--border-focus);
  background: var(--paper);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.biz-name-inp::placeholder { color: var(--ghost); font-weight: 500; }

/* Meta column */
.cl-meta-col { width: 252px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }

.cl-meta-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  align-items: center;
}
.cl-meta-lbl { font-size: 13px; color: var(--muted); white-space: nowrap; }
.cl-meta-grid input,
.cl-meta-grid select.fi {
  text-align: right;
  font-size: 13px;
  padding: 6px 10px;
}

/* Balance Due box */
.cl-balance-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--balance-bg);
  border: 1px solid var(--balance-bdr);
  border-radius: 6px;
  padding: 10px 13px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  transition: background .25s, border-color .25s;
}

/* ════════════════════════════════════════
   ROW 3 — Bill To / Ship To
════════════════════════════════════════ */
.cl-parties { display: flex; gap: 20px; }
.cl-parties > div { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.cl-parties textarea { min-height: 90px; }

/* ════════════════════════════════════════
   LINE ITEMS TABLE
════════════════════════════════════════ */
.items-tbl { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.items-tbl thead tr { background: var(--th-bg); transition: background .25s; }
.items-tbl th {
  padding: 10px 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .5px;
  color: var(--th-txt); text-align: left;
}
.items-tbl th.th-unit { width: 72px; display: none; }
.items-tbl th.th-qty  { text-align: center; width: 100px; }
.items-tbl th.th-rate { text-align: right; width: 120px; }
.items-tbl th.th-amt  { text-align: right; width: 110px; }
.items-tbl th.th-del  { width: 36px; }

.show-units .items-tbl th.th-unit { display: table-cell; }
.show-units .items-tbl td.td-unit { display: table-cell; }

.items-tbl tbody tr { border-bottom: 1px solid var(--row-sep); }
.items-tbl tbody tr:last-child { border-bottom: none; }
.items-tbl td { padding: 4px; vertical-align: middle; }
.items-tbl td.td-unit { display: none; }
.items-tbl td.td-amt {
  text-align: right; padding-right: 10px;
  font-size: 13px; white-space: nowrap; font-weight: 500;
}
.items-tbl td.td-del { text-align: center; padding: 4px 2px; }

.items-tbl td input {
  border: 1.5px solid var(--border);
  border-radius: 5px;
  padding: 7px 9px;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  background: var(--input-bg);
  width: 100%;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.items-tbl td input[data-f="desc"] { font-weight: 600; }
.items-tbl td input:hover { border-color: var(--border-hover); background: var(--paper); }
.items-tbl td input:focus {
  outline: none;
  border-color: var(--border-focus);
  background: var(--paper);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.items-tbl td input::placeholder { color: var(--ghost); font-weight: 400; }
.items-tbl td input.iq { text-align: center; }
.items-tbl td input.ir { text-align: right; }
.items-tbl td input.iu { text-align: center; text-transform: uppercase; font-size: 11px; font-weight: 400; }

.del-btn {
  background: none; border: none; color: var(--ghost); cursor: pointer;
  font-size: 18px; width: 28px; height: 28px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s; line-height: 1;
}
.del-btn:hover { color: #EF4444; background: rgba(239,68,68,.1); }

.add-row-btn {
  width: 100%;
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: 6px;
  padding: 10px;
  font-size: 13px; font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
  margin-bottom: 16px;
  text-align: center;
}
.add-row-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-lt); }

/* ════════════════════════════════════════
   TOTALS (right-aligned, aligned with Amount column)
════════════════════════════════════════ */
.cl-totals-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 28px;
  /* offset = del-col(36px) + td-amt padding(10px) */
  padding-right: 46px;
}
.cl-totals { width: 46%; }

.cl-tot-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--row-sep); font-size: 13px; gap: 8px;
}
.cl-tot-row:last-of-type { border-bottom: none; }
.cl-tot-lbl { color: var(--muted); flex-shrink: 0; }
.cl-tot-val { font-weight: 400; white-space: nowrap; }

.tx-ctrl { display: flex; align-items: center; gap: 6px; }

/* Number inputs in totals area */
.snum {
  width: 62px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  padding: 5px 7px;
  font-size: 13px; font-family: 'DM Sans', sans-serif;
  text-align: right; background: var(--control-bg); color: var(--ink);
  transition: border-color .18s, box-shadow .18s;
}
.snum:hover { border-color: var(--border-hover); }
.snum:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }

/* ── Segmented % / $ toggle ── */
.seg-ctrl {
  display: inline-flex;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color .15s;
}
.seg-btn {
  background: none;
  border: none;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s;
  line-height: 1.4;
  min-width: 30px;
  text-align: center;
}
.seg-btn + .seg-btn { border-left: 1.5px solid var(--border); }
.seg-btn.seg-active { background: var(--accent); color: #fff; }
.seg-btn:not(.seg-active):hover { background: var(--hover-bg); color: var(--ink); }

.opt-togs { display: flex; gap: 12px; padding: 5px 0 2px; }
.opt-tog {
  background: none; border: none;
  font-size: 12px; font-weight: 600; font-family: 'DM Sans', sans-serif;
  color: var(--accent); cursor: pointer; padding: 2px 0;
  transition: opacity .15s;
}
.opt-tog:hover { text-decoration: underline; }

.cl-grand-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; font-size: 14px; font-weight: 700;
  border-top: 2px solid var(--ink); margin-top: 2px;
}

.paid-inp {
  width: 90px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  padding: 5px 7px;
  font-size: 13px; font-family: 'DM Sans', sans-serif;
  text-align: right; background: var(--control-bg); color: var(--ink);
  transition: border-color .18s, box-shadow .18s;
}
.paid-inp:hover { border-color: var(--border-hover); }
.paid-inp:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }

/* ════════════════════════════════════════
   NOTES + TERMS FOOTER
════════════════════════════════════════ */
.cl-footer {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.cl-footer-sec { display: flex; flex-direction: column; gap: 5px; }

/* ════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════ */
.inv-sidebar { width: var(--sb); flex-shrink: 0; position: sticky; top: 24px; }

/* Primary — Download PDF */
.btn-ss {
  width: 100%; background: var(--accent); color: white; border: none;
  border-radius: var(--r); padding: 13px 20px; font-size: 14px; font-weight: 600;
  font-family: 'DM Sans', sans-serif; cursor: pointer; margin-bottom: 8px;
  transition: background .15s, transform .1s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-ss:hover  { background: var(--accent-dk); }
.btn-ss:active { transform: scale(.98); }

/* Secondary — Save Draft */
.btn-dl {
  width: 100%; background: var(--card-bg); border: 1.5px solid var(--border); color: var(--ink);
  font-size: 13px; font-weight: 500; font-family: 'DM Sans', sans-serif; cursor: pointer;
  padding: 10px 20px; display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-bottom: 6px; border-radius: var(--r);
  transition: border-color .15s, box-shadow .15s, background .25s;
}
.btn-dl:hover { border-color: var(--border-hover); box-shadow: var(--shadow-sm); }

/* Ghost — New Invoice */
.btn-new {
  width: 100%; background: none; border: none; color: var(--muted);
  font-size: 12px; font-family: 'DM Sans', sans-serif; cursor: pointer;
  padding: 6px 20px; margin-bottom: 4px; border-radius: var(--r);
  transition: color .15s, background .15s;
}
.btn-new:hover { color: var(--ink); background: rgba(0,0,0,.05); }
[data-theme="ink"] .btn-new:hover { background: rgba(255,255,255,.06); }

/* Sample data */
.btn-sample {
  width: 100%; background: none; border: none; color: var(--accent);
  font-size: 12px; font-weight: 500; font-family: 'DM Sans', sans-serif; cursor: pointer;
  padding: 6px 20px; margin-bottom: 4px; border-radius: var(--r);
  transition: background .15s;
}
.btn-sample:hover { background: var(--accent-lt); }

/* Danger — Clear Form / Clear Drafts */
.btn-danger-row { display: flex; gap: 6px; margin-bottom: 14px; }
.btn-danger-sm {
  flex: 1; background: none; border: 1.5px solid var(--border);
  color: var(--muted);
  font-size: 11.5px; font-weight: 500; font-family: 'DM Sans', sans-serif; cursor: pointer;
  padding: 8px 8px; border-radius: var(--r);
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.btn-clear-form:hover {
  background: #FFF7ED; border-color: #FED7AA; color: #C2410C;
}
.btn-clear-drafts:hover {
  background: #FEF2F2; border-color: #FECACA; color: #DC2626;
}
[data-theme="ink"] .btn-danger-sm { border-color: rgba(255,255,255,.08); color: rgba(255,255,255,.35); }
[data-theme="ink"] .btn-clear-form:hover { background: rgba(234,88,12,.1); border-color: rgba(234,88,12,.3); color: #FB923C; }
[data-theme="ink"] .btn-clear-drafts:hover { background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.35); color: #F87171; }

/* Cards */
.card {
  background: var(--card-bg); border-radius: var(--r);
  box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 10px;
  transition: background .25s, box-shadow .25s;
}
.card-hd {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; user-select: none; transition: background .1s;
}
.card-hd:hover { background: var(--hover-bg); }
.card-hd-title { font-size: 12px; font-weight: 600; color: var(--ink); }
.card-chev { font-size: 9px; color: var(--muted); transition: transform .2s; }
.card-hd.collapsed .card-chev { transform: rotate(180deg); }
.card-bd { padding: 14px 16px; }
.card-bd.hidden { display: none; }

.sf { margin-bottom: 12px; }
.sf:last-child { margin-bottom: 0; }
.sf label {
  display: block; font-size: 10px; font-weight: 600; color: var(--muted);
  letter-spacing: .6px; text-transform: uppercase; margin-bottom: 5px;
}
.sf select {
  width: 100%; padding: 9px 28px 9px 11px;
  border: 1.5px solid var(--border); border-radius: 6px;
  font-size: 13px; font-family: 'DM Sans', sans-serif;
  background: var(--input-bg); color: var(--ink);
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: border-color .18s, box-shadow .18s;
}
.sf select:hover { border-color: var(--border-hover); }
.sf select:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
[data-theme="ink"] .sf select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237A8EA8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Theme picker */
.theme-row { display: flex; gap: 6px; }
.theme-opt {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 6px;
  border: 1.5px solid var(--border);
  background: none;
  font-size: 12px; font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  flex: 1; justify-content: center;
}
.theme-opt:hover:not(.theme-opt-active) { border-color: var(--border-hover); background: var(--hover-bg); color: var(--ink); }
.theme-opt.theme-opt-active { border-color: var(--accent); background: var(--accent-lt); color: var(--accent); }
.theme-dot {
  width: 11px; height: 11px; border-radius: 50%;
  flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}

/* Toggle switch */
.sf-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0; margin-bottom: 8px;
}
.sf-toggle:last-child { margin-bottom: 0; }
.sf-toggle-lbl { font-size: 12px; font-weight: 500; color: var(--ink); }
.toggle { position: relative; width: 32px; height: 18px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--border); border-radius: 18px;
  cursor: pointer; transition: background .2s;
}
.toggle-slider::before {
  content: ''; position: absolute;
  width: 14px; height: 14px; left: 2px; top: 2px;
  background: white; border-radius: 50%;
  transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle input:checked + .toggle-slider { background: var(--accent); }
.toggle input:checked + .toggle-slider::before { transform: translateX(14px); }

/* Invoice Numbering */
.sf-divider { border: none; border-top: 1px solid var(--border); margin: 12px 0 10px; }
.sf-section-lbl { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.num-row { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 6px; }
.num-field { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.num-field label { font-size: 11px; color: var(--muted); font-weight: 500; }
.num-prefix-inp,
.num-counter-inp {
  width: 100%; padding: 5px 8px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--control-bg); color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  transition: border-color .15s, box-shadow .15s;
}
.num-prefix-inp:focus,
.num-counter-inp:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.num-counter-inp { width: 70px; flex: none; }
.num-reset-btn {
  flex-shrink: 0; width: 28px; height: 28px;
  background: var(--accent-lt); border: 1px solid var(--border);
  border-radius: 5px; color: var(--muted); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  padding: 0; line-height: 1;
}
.num-reset-btn:hover { background: var(--border); color: var(--ink); }
.num-preview {
  font-size: 11px; color: var(--muted); font-style: italic;
  padding: 2px 0 0; min-height: 16px;
}

/* Drafts */
.dl-wrap { max-height: 180px; overflow-y: auto; }
.d-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 16px; border-bottom: 1px solid var(--row-sep);
  cursor: pointer; transition: background .1s;
}
.d-item:hover { background: var(--hover-bg); }
.d-item:last-child { border-bottom: none; }
.d-info { min-width: 0; flex: 1; }
.d-name {
  font-size: 12px; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.d-date { font-size: 10px; color: var(--muted); margin-top: 1px; }
.d-del {
  color: var(--ghost); font-size: 15px; cursor: pointer;
  padding: 2px 5px; border-radius: 3px;
  transition: color .15s, background .15s;
  flex-shrink: 0; margin-left: 8px;
}
.d-del:hover { color: #EF4444; background: rgba(239,68,68,.1); }
.no-drafts { padding: 14px 16px; font-size: 12px; color: var(--muted); text-align: center; }
.save-draft {
  display: block; width: 100%; background: none;
  border: none; border-top: 1px solid var(--border);
  padding: 11px 16px; font-size: 12px; font-weight: 600;
  font-family: 'DM Sans', sans-serif; color: var(--accent);
  cursor: pointer; text-align: left; transition: background .1s;
}
.save-draft:hover { background: var(--accent-lt); }

/* ════════════════════════════════════════
   TOAST
════════════════════════════════════════ */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: #111827; color: white;
  padding: 11px 18px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  z-index: 9999; opacity: 0; transform: translateY(8px);
  transition: opacity .25s, transform .25s; pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ════════════════════════════════════════
   TEMPLATE PICKER (sidebar card)
════════════════════════════════════════ */
.tpl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.tpl-btn {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: border-color .15s, box-shadow .15s;
  text-align: left;
}
.tpl-btn:hover:not(.tpl-btn-active) { border-color: var(--border-hover); }
.tpl-btn.tpl-btn-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.tpl-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.tpl-thumb svg { display: block; width: 100%; height: 100%; }
.tpl-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  padding: 5px 8px;
  border-top: 1px solid var(--border);
  background: var(--card-bg);
  transition: color .15s;
}
.tpl-btn.tpl-btn-active .tpl-label { color: var(--accent); }

/* ════════════════════════════════════════
   TEMPLATE 2 — Modern (dark header band)
════════════════════════════════════════ */
.tpl-modern {
  padding-top: 0 !important;
  overflow: hidden;
}
.tpl-modern .cl-top {
  background: var(--th-bg);
  margin: 0 -48px;
  padding: 36px 48px 20px;
  margin-bottom: 0;
}
.tpl-modern .cl-biz-meta {
  background: var(--th-bg);
  margin: 0 -48px;
  padding: 0 48px 28px;
}
.tpl-modern .cl-biz-meta + .cl-divider { margin-top: 28px; }

/* Text & inputs inside dark header */
.tpl-modern .inv-title,
.tpl-modern .cl-top .inv-num-row input,
.tpl-modern .cl-top .inv-num-row > span { color: #fff; }
.tpl-modern .logo-zone {
  border-radius: var(--r);
  border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.45);
}
.tpl-modern .logo-zone:hover {
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
}
.tpl-modern .biz-name-inp {
  color: #fff;
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
}
.tpl-modern .biz-name-inp::placeholder { color: rgba(255,255,255,.3); }
.tpl-modern .biz-name-inp:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.3); }
.tpl-modern .biz-name-inp:focus {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5);
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}
.tpl-modern .cl-biz-meta .fi {
  color: #fff;
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
}
.tpl-modern .cl-biz-meta .fi::placeholder { color: rgba(255,255,255,.3); }
.tpl-modern .cl-biz-meta .fi:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.3); }
.tpl-modern .cl-biz-meta .fi:focus {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5);
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}
.tpl-modern .cl-meta-lbl { color: rgba(255,255,255,.55); }
.tpl-modern .cl-meta-grid input,
.tpl-modern .cl-meta-grid select.fi { color: #fff; }
.tpl-modern .cl-meta-grid select.fi option { color: var(--ink); background: white; }
.tpl-modern .cl-balance-box {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  color: #fff;
}
.tpl-modern .status-badge { opacity: .9; }

/* PDF overrides for modern header inputs */
.pdf-mode.tpl-modern .biz-name-inp,
.pdf-mode.tpl-modern .cl-biz-meta .fi,
.pdf-mode.tpl-modern .cl-meta-grid input,
.pdf-mode.tpl-modern .cl-meta-grid select.fi {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════
   TEMPLATE 3 — Minimal
════════════════════════════════════════ */
.tpl-minimal .cl-top { align-items: center; margin-bottom: 24px; }
.tpl-minimal .logo-zone {
  border-radius: var(--r);
  width: 72px; height: 72px;
}
.tpl-minimal .inv-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--muted);
  margin-bottom: 4px;
}
.tpl-minimal .inv-num-row input {
  font-size: 30px;
  font-weight: 700;
  width: 230px;
  letter-spacing: -0.5px;
}
.tpl-minimal .inv-num-row { margin-bottom: 6px; }
.tpl-minimal .cl-divider { border-top-style: dashed; opacity: .6; }
.tpl-minimal .items-tbl thead tr { background: transparent; }
.tpl-minimal .items-tbl th {
  color: var(--muted);
  font-size: 10px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--ink);
}
.tpl-minimal .items-tbl th.th-del { border-bottom: 1.5px solid var(--ink); }
.tpl-minimal .items-tbl tbody tr { border-bottom-color: var(--border); }
.tpl-minimal .cl-grand-row { border-top-color: var(--border); border-top-width: 1px; }
.tpl-minimal .cl-balance-box {
  background: transparent;
  border: none;
  padding: 8px 0;
  font-size: 16px;
}
.tpl-minimal .cl-balance-box > span:first-child {
  color: var(--muted);
  font-weight: 400;
  font-size: 13px;
}

/* ════════════════════════════════════════
   TEMPLATE 4 — Ledger
════════════════════════════════════════ */
.tpl-ledger {
  border-top: 5px solid var(--accent);
}
.tpl-ledger .cl-top { margin-bottom: 16px; }
.tpl-ledger .logo-zone { border-radius: var(--r); }
.tpl-ledger .inv-title { font-size: 40px; font-weight: 700; letter-spacing: 2px; }
.tpl-ledger .cl-biz-meta {
  background: var(--accent-lt);
  margin: 0 -48px;
  padding: 18px 48px;
  margin-bottom: 0;
}
.tpl-ledger .cl-biz-meta + .cl-divider { margin-top: 24px; }
.tpl-ledger .cl-biz-meta .biz-name-inp { background: rgba(255,255,255,.6); }
.tpl-ledger .cl-biz-meta .fi         { background: rgba(255,255,255,.6); }
[data-theme="ink"] .tpl-ledger .cl-biz-meta .biz-name-inp { background: rgba(255,255,255,.06); }
[data-theme="ink"] .tpl-ledger .cl-biz-meta .fi           { background: rgba(255,255,255,.06); }
.tpl-ledger .cl-balance-box {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.tpl-ledger .cl-tot-row:last-of-type { display: none; } /* hide amount paid row */
.tpl-ledger .cl-grand-row {
  background: var(--accent-lt);
  border-top-color: var(--accent);
  border-top-width: 2px;
  border-radius: 4px;
  padding: 9px 8px;
  margin: 4px -8px 0;
}
[data-theme="ink"] .tpl-ledger .cl-grand-row { background: var(--accent-lt); }

/* ════════════════════════════════════════
   PDF MODE — hide all interactive chrome
════════════════════════════════════════ */
.pdf-mode .add-row-btn,
.pdf-mode .del-btn,
.pdf-mode .th-del,
.pdf-mode .opt-tog,
.pdf-mode .opt-togs,
.pdf-mode .seg-ctrl,
.pdf-mode .snum,
.pdf-mode .logo-zone input[type="file"],
.pdf-mode .status-badge,
.pdf-mode .status-row { display: none !important; }

/* Hide the "+ Logo" placeholder when no logo has been uploaded.
   .logo-zone gets the .has-logo class only when an image is set. */
.pdf-mode .logo-zone { border: none !important; background: transparent !important; }
.pdf-mode .logo-zone:not(.has-logo) { display: none !important; }
.pdf-mode .logo-ph { display: none !important; }

/* Flatten form inputs — no borders, no backgrounds, no shadows. */
.pdf-mode .biz-name-inp,
.pdf-mode .fi,
.pdf-mode select.fi,
.pdf-mode .items-tbl td input,
.pdf-mode .paid-inp {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 2px 0 !important;
}
.pdf-mode select.fi {
  background-image: none !important;
  padding-right: 0 !important;
  -webkit-appearance: none !important;
          appearance: none !important;
}

/* Suppress the greyed-out placeholder text in printed PDFs — if a field is
   empty the user does not want "Your Business Name" to appear in the export. */
.pdf-mode .fi::placeholder,
.pdf-mode .biz-name-inp::placeholder,
.pdf-mode textarea::placeholder,
.pdf-mode input::placeholder { color: transparent !important; }

/* Hide the whole "Payment Terms" dropdown row when empty — it leaves an awkward
   "Select…" sentence otherwise. */
.pdf-mode .cl-meta-grid select.fi:placeholder-shown,
.pdf-mode select.fi:placeholder-shown { color: transparent !important; }

/* Hide the delete-column cell on each line item (×) in the items table. */
.pdf-mode .items-tbl .th-del,
.pdf-mode .items-tbl td:last-child { display: none !important; }

/* Make sure the paper itself paints a solid white background in PDF, even if
   the overlay/theme set something tinted. */
.pdf-mode { background: #ffffff !important; }

/* ═══ PDF single-page spacing lockdown ═══
   The default paper + per-template padding adds up to >297mm of vertical
   space, pushing content onto a 2nd page. In pdf-mode we aggressively trim
   padding, line gaps, and section margins so the whole invoice fits on
   one A4 sheet. jsPDF's pagebreak:avoid rules do the rest. */
.pdf-mode.inv-paper        { padding: 28px 32px !important; }
.pdf-mode .cl-top          { margin-bottom: 14px !important; }
.pdf-mode .cl-biz-meta     { margin-bottom: 14px !important; gap: 20px !important; }
.pdf-mode .cl-divider      { margin: 10px 0 !important; }
.pdf-mode .cl-parties      { margin-bottom: 14px !important; gap: 20px !important; }
.pdf-mode .items-tbl       { margin-top: 10px !important; }
.pdf-mode .items-tbl th,
.pdf-mode .items-tbl td    { padding: 6px 8px !important; }
.pdf-mode .cl-totals-wrap  { margin-top: 10px !important; }
.pdf-mode .cl-tot-row      { padding: 4px 0 !important; }
.pdf-mode .cl-grand-row    { padding: 8px 0 !important; margin-top: 6px !important; }
.pdf-mode .cl-footer       { margin-top: 14px !important; gap: 20px !important; }
.pdf-mode .cl-footer-sec textarea { min-height: 44px !important; }

/* Template-specific extra padding — flatten too. */
.pdf-mode.tpl-modern .cl-top       { padding: 20px 32px !important; }
.pdf-mode.tpl-modern .cl-biz-meta  { padding: 0 32px 14px !important; }
.pdf-mode.tpl-modern .cl-parties,
.pdf-mode.tpl-modern .items-tbl,
.pdf-mode.tpl-modern .cl-totals-wrap,
.pdf-mode.tpl-modern .cl-footer    { padding-left: 32px !important; padding-right: 32px !important; }
.pdf-mode.tpl-ledger .cl-top       { padding-top: 16px !important; }
.pdf-mode.tpl-minimal              { padding: 24px 28px !important; }

/* ════════════════════════════════════════
   PRINT
════════════════════════════════════════ */
@media print {
  .inv-sidebar, .add-row-btn, .del-btn, .opt-tog, .seg-ctrl, .opt-togs { display: none !important; }
  body { background: white; }
  .inv-paper { box-shadow: none !important; border-radius: 0 !important; }
  .inv-app { padding: 0; }
}

/* ════════════════════════════════════════
   PDF PRINT CLONE — buildPDFClone() replaces every form control with a
   plain <span>/<div> carrying the .pdf-txt class, then appends the clone
   off-screen for html2canvas to capture. These rules make those text nodes
   look like clean rendered labels (no borders, no backgrounds) and strip
   any row explicitly flagged with .pdf-hide. html2canvas runs with
   windowWidth:1024 so the editor's desktop two-column layout is preserved
   (the 820px mobile breakpoint doesn't trigger).
════════════════════════════════════════ */
.pdf-clone .pdf-hide { display: none !important; }

/* Plain text replacements — mirror the padding/line-height of the original
   inputs so vertical rhythm stays the same. */
.pdf-clone .pdf-txt {
  display: inline-block;
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  padding: 2px 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.pdf-clone .pdf-multiline {
  display: block;
  min-height: 0;
}
.pdf-clone .pdf-biz-name {
  font-size: 15px;
  font-weight: 700;
}
.pdf-clone .cl-meta-grid .pdf-txt {
  text-align: right;
  width: 100%;
}
.pdf-clone .inv-num-row .pdf-txt {
  text-align: right;
  font-size: 14px;
  min-width: 60px;
}

/* Items table — replaced <input> cells become plain spans; keep alignment */
.pdf-clone .items-tbl td .pdf-txt { padding: 0; width: 100%; }
.pdf-clone .items-tbl td:nth-child(1) .pdf-txt { font-weight: 600; }
.pdf-clone .items-tbl td:nth-child(2) .pdf-txt { text-align: center; }
.pdf-clone .items-tbl td:nth-child(3) .pdf-txt { text-align: right; }

/* When no logo is uploaded, .logo-zone is hidden (display:none) which collapses
   the cl-top flex row to a single item at the left. Push the title column to
   the right so "INVOICE" sits in its expected top-right position. */
.pdf-clone .cl-title-col { margin-left: auto; }

/* Section labels — the editor shows "BILL TO" uppercase to look like a chip,
   but the printed invoice reads better as title case ("Bill To:"). */
.pdf-clone .slbl { text-transform: none; letter-spacing: .3px; font-size: 11px; }

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 820px) {
  .inv-app { flex-direction: column; padding: 16px 12px 60px; }
  .inv-sidebar { width: 100%; position: static; }
  .inv-paper { padding: 28px 20px; }
  .cl-biz-meta { flex-direction: column; }
  .cl-meta-col { width: 100%; }
  .cl-parties { flex-direction: column; }
  .cl-totals { width: 100%; }
  .cl-totals-wrap { padding-right: 0; }
}