/* The invoice document. Shared by the in-app editor and the PDF export, so the PDF
   matches the screen. Measurements and colours come from design/SNC Invoice (standalone).html. */

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

.inv-page, .inv-page * {
  box-sizing: content-box;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.inv-page {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 210mm;
  min-height: 297mm;
  padding: 52px 56px 0;
  background: #fff;
  font-family: 'Lexend', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #0F2A45;
  text-align: left;
}

/* Fields: inputs while editing, plain text in the PDF. Same box either way. */
.f {
  display: block;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 12px;
  line-height: normal;
  color: #0F2A45;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 3px;
}
.f.ta { white-space: pre-wrap; line-height: 1.5; resize: none; overflow: hidden; }
.f::placeholder { color: #A3B1BE; opacity: 1; }
.inv-edit .f:hover { background: #F1F5F8; }
.inv-edit .f:focus { background: #E6F3F5; }
.inv-edit .f.fx { cursor: default; }
.inv-edit .f.fx:hover { background: transparent; }
.inv-edit .f[data-ph]:empty::before { content: attr(data-ph); color: #A3B1BE; white-space: pre-wrap; }
button.f { cursor: pointer; text-align: right; }
.inv-edit input[type=date].f { cursor: pointer; }
.inv-edit input[type=date].f::-webkit-calendar-picker-indicator { margin-left: 2px; opacity: 0; cursor: pointer; }
.inv-edit input[type=date].f:hover::-webkit-calendar-picker-indicator,
.inv-edit input[type=date].f:focus::-webkit-calendar-picker-indicator { opacity: .5; }
.r { text-align: right; }
.fw5 { font-weight: 500; }
.num { font-variant-numeric: tabular-nums; }

/* Header */
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.inv-logo { display: block; height: 30px; width: auto; margin-top: 4px; }
.inv-head-r { text-align: right; }
.inv-title { font-size: 30px; font-weight: 600; letter-spacing: .14em; line-height: 1; }
.inv-meta {
  display: grid;
  grid-template-columns: auto max-content;
  gap: 4px 14px;
  margin-top: 14px;
  align-items: center;
}
.inv-lbl { color: #5B6E80; }
.inv-meta > .f { width: 130px; justify-self: end; text-align: right; }
.inv-meta > .inv-due { width: auto; min-width: 130px; max-width: 220px; white-space: normal; }
.inv-due .ph { color: #A3B1BE; }

/* Brand stripes */
.inv-stripe, .inv-band { display: flex; }
.inv-stripe { height: 3px; margin: 28px 0 26px; }
.inv-band { height: 8px; margin: 0 -56px; }
.inv-stripe > span:nth-child(1), .inv-band > span:nth-child(1) { flex: 1; background: #0F2A45; }
.inv-stripe > span:nth-child(2) { width: 64px; background: #08889E; }
.inv-stripe > span:nth-child(3) { width: 28px; background: #B08D3A; }
.inv-band > span:nth-child(2) { width: 120px; background: #08889E; }
.inv-band > span:nth-child(3) { width: 48px; background: #B08D3A; }

/* From / Bill to */
.inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.inv-from, .inv-to { display: flex; flex-direction: column; gap: 6px; }
.inv-to { align-items: flex-start; }
.inv-from-name { font-weight: 600; font-size: 13px; }
.inv-kicker { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #08889E; }
.inv-to-name, .inv-to-addr { box-sizing: border-box; width: 100%; padding: 2px 0; margin: -2px 0; }
.inv-to-name { font-size: 13px; font-weight: 600; }

/* Line items */
.inv-lines { margin-top: 30px; }
.inv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px 100px 110px;
  gap: 12px;
  padding: 9px 12px;
}
.inv-row-head { background: #0F2A45; color: #fff; font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.inv-item { position: relative; border-bottom: 1px solid #DCE3EA; align-items: center; break-inside: avoid; }
.inv-desc { line-height: 1.4; white-space: pre-wrap; resize: none; overflow: hidden; }
.inv-amount { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.inv-remove {
  position: absolute; right: -28px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; padding: 0;
  border: none; border-radius: 50%;
  background: #EEF2F5; color: #5B6E80;
  font-family: inherit; font-size: 13px; line-height: 20px;
  cursor: pointer;
}
.inv-remove:hover { background: #DCE3EA; color: #0F2A45; }
.inv-addline {
  margin-top: 10px; padding: 6px 12px;
  font-family: inherit; font-size: 12px; font-weight: 500; color: #08889E;
  background: transparent; border: 1px dashed #9CCFD8; border-radius: 4px;
  cursor: pointer;
}
.inv-addline:hover { background: #E6F3F5; }

/* Totals */
.inv-totals-wrap { display: flex; justify-content: flex-end; margin-top: 18px; break-inside: avoid; }
.inv-totals { width: 280px; display: flex; flex-direction: column; }
.inv-tline { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; }
.inv-tline .inv-lbl { display: flex; align-items: center; gap: 4px; }
.f.inv-rate { width: 30px; color: #5B6E80; text-align: right; }
.inv-total { display: flex; justify-content: space-between; align-items: center; padding: 12px; margin-top: 6px; background: #0F2A45; color: #fff; }
.inv-total-lbl { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.inv-total-num { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Payment details / Notes */
.inv-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 34px; padding-bottom: 24px; break-inside: avoid; }
.inv-col { display: flex; flex-direction: column; gap: 8px; }
.inv-pay { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 10px; align-items: center; }
.inv-terms { font-weight: 500; }
.inv-terms:empty { display: none; }

/* Footer */
.inv-foot {
  margin-top: auto;
  padding: 18px 0 22px;
  border-top: 1px solid #DCE3EA;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 10px; color: #5B6E80;
}
.inv-foot-ids { display: flex; gap: 16px; }
.inv-foot-id { display: flex; align-items: baseline; gap: 4px; }
.f.f-sm { font-size: 10px; color: #5B6E80; padding: 1px 3px; margin: -1px -3px; }

/* PDF export page */
body.inv-print { margin: 0; background: #fff; }