/* Invoice editor. Inputs look like plain text on a sheet of paper. */
.invoice-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.save-status { min-width: 9rem; }
.invoice-paper {
  background: #fff; color: #18181b; border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(1.25rem, 4vw, 3rem); box-shadow: 0 20px 50px -24px rgb(0 0 0 / 0.25);
  font-size: 0.9rem; color-scheme: light;
}
.inv-input {
  width: 100%; font: inherit; color: inherit; background: transparent; border: 1px solid transparent;
  border-radius: 0.375rem; padding: 0.25rem 0.4rem; margin: 0; resize: none; line-height: 1.5;
}
.inv-input:hover { background: #f4f4f5; }
.inv-input:focus { outline: none; background: #fff; border-color: color-mix(in oklch, var(--primary) 60%, white); box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent); }
.inv-input::placeholder { color: #a1a1aa; }
.inv-input[readonly] { cursor: default; }
select.inv-input { appearance: none; cursor: pointer; }
.inv-strong { font-weight: 600; font-size: 1.05rem; }
.inv-title { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; text-align: right; color: var(--cta-1); }
.inv-top { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.inv-meta { display: grid; gap: 0.75rem; align-content: start; }
.inv-meta-grid { display: grid; grid-template-columns: auto minmax(0, 11rem); gap: 0.25rem 0.75rem; align-items: center; justify-content: end; }
.inv-meta-grid label { color: #71717a; font-size: 0.8125rem; text-align: right; }
.inv-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #71717a; padding-left: 0.4rem; }
.inv-billto { margin-top: 2rem; max-width: 22rem; }
.inv-items { width: 100%; margin-top: 2rem; border-collapse: collapse; }
.inv-items th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; background: var(--cta-1); height: 2.25rem; padding: 0 0.6rem; border: 0; }
.inv-items th:first-child { border-radius: 0.375rem 0 0 0.375rem; }
.inv-items th:last-child { border-radius: 0 0.375rem 0.375rem 0; }
.inv-items td { padding: 0.25rem 0.2rem; border-bottom: 1px solid #e4e4e7; vertical-align: middle; }
.inv-items tbody tr:hover { background: transparent; }
.inv-items .num { text-align: right; }
.inv-items td.num .inv-input { text-align: right; max-width: 7rem; margin-left: auto; }
.inv-items .amount { padding-right: 0.6rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-items .remove { width: 1.75rem; height: 1.75rem; padding: 0; color: #a1a1aa; }
.inv-items .remove:hover { color: #dc2626; background: #fef2f2; }
.invoice-paper .btn-ghost { color: #3f3f46; }
.invoice-paper .btn-ghost:hover { background: #f4f4f5; }
.inv-bottom { display: grid; grid-template-columns: 1fr minmax(16rem, 20rem); gap: 2rem; margin-top: 1.5rem; align-items: start; }
.inv-totals { display: grid; gap: 0.25rem; font-variant-numeric: tabular-nums; }
.tot-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.2rem 0.4rem; }
.tot-row label { display: flex; align-items: center; gap: 0.25rem; color: #52525b; }
.tot-row > span:first-child { color: #52525b; }
.inv-pct { width: 3.75rem; text-align: right; }
.inv-taxlabel { width: 4.5rem; }
.inv-money { width: 7rem; text-align: right; }
.tot-total { border-top: 1px solid #e4e4e7; margin-top: 0.25rem; padding-top: 0.5rem; font-weight: 600; }
.tot-total > span:first-child { color: #18181b; }
.tot-due { background: color-mix(in oklch, var(--cta-1) 10%, white); border-radius: 0.5rem; padding: 0.6rem 0.6rem; font-weight: 700; font-size: 1.05rem; }
.tot-due > span:first-child { color: #18181b; }
.logo-drop {
  display: grid; place-items: center; width: 9rem; height: 4.5rem; border: 1.5px dashed #d4d4d8; border-radius: 0.5rem;
  color: #a1a1aa; font-size: 0.8125rem; cursor: pointer;
}
.logo-drop:hover { border-color: var(--primary); color: var(--primary); }
.logo-drop.has-logo { border: 0; width: auto; height: auto; place-items: start; }
.logo-drop img { max-height: 4.5rem; max-width: 12rem; object-fit: contain; }
@media (max-width: 640px) {
  .inv-top, .inv-bottom { grid-template-columns: 1fr; gap: 1.25rem; }
  .inv-title { text-align: left; }
  .inv-meta-grid { justify-content: start; }
  .inv-meta-grid label { text-align: left; }
  .inv-items th:nth-child(2), .inv-items th:nth-child(3) { width: 4.5rem; }
}
.template-grid .card-title { font-size: 1rem; }

@media print {
  @page { margin: 12mm; }
  html, body { background: #fff !important; }
  .site-header, .site-footer, .no-print, .calc-head, .page-intro, .page-after, nav[aria-label="Breadcrumb"] { display: none !important; }
  main .container { max-width: none; padding: 0; }
  .section-sm { padding: 0; }
  .invoice-paper { border: 0; box-shadow: none; padding: 0; border-radius: 0; font-size: 10.5pt; }
  .inv-input { border: 0 !important; background: transparent !important; box-shadow: none !important; padding-left: 0; padding-right: 0; }
  .inv-input::placeholder { color: transparent; }
  .inv-items tr[data-empty] { display: none; }
  .logo-drop:not(.has-logo) { display: none; }
  .inv-items th, .tot-due, .inv-title { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  select.inv-input { -webkit-appearance: none; }
}