/* KpfInvoiceDocument v3 — finer design line + aligned margins */

:root {
  --kpf-inv-surface: #ffffff;
  --kpf-inv-canvas: #f4f5f7;
  --kpf-inv-ink: #14141a;
  --kpf-inv-secondary: #40424d;
  --kpf-inv-muted: #6e7180;
  --kpf-inv-line: #e4e6ec;
  --kpf-inv-line-soft: #eef0f4;
  --kpf-inv-cobalt: #001bff;
  --kpf-inv-radius: 4px;
  /* Single shared document gutter — everything aligns to this */
  --kpf-inv-gutter: clamp(24px, 4.2vw, 44px);
  --kpf-inv-stack: 28px;
}

/* —— Page —— */
body.kpf-invoice-doc-page #content,
body.customers.kpf-invoice-doc-page #content {
  background: var(--kpf-inv-canvas) !important;
  padding-bottom: 72px !important;
}

body.kpf-invoice-doc-page .kpf-invoice-doc__container {
  width: 100% !important;
  max-width: 840px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

body.kpf-invoice-doc-page .kpf-invoice-doc__row {
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
  float: none !important;
}

body.kpf-invoice-doc-page .preview-top-wrapper.kpf-invoice-doc__preview-src,
body.kpf-invoice-doc-page .customer-top-submenu {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
}

/* —— Document —— */
.panel_s.kpf-invoice-doc {
  background: var(--kpf-inv-surface) !important;
  border: 1px solid var(--kpf-inv-line) !important;
  border-radius: var(--kpf-inv-radius) !important;
  box-shadow: 0 8px 28px color-mix(in srgb, #14141a 5%, transparent) !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: none !important;
  margin: 24px 0 48px !important;
  float: none !important;
}

.panel_s.kpf-invoice-doc > .panel-body {
  padding: 0 !important;
  background: transparent !important;
}

/* Kill Bootstrap row/col offsets so gutters stay true */
.kpf-invoice-doc .row,
.kpf-invoice-doc .kpf-invoice-doc__masthead {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.kpf-invoice-doc [class*='col-'] {
  float: none !important;
  position: relative !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Shared horizontal gutter for all document sections */
.kpf-invoice-doc__toolbar,
.kpf-invoice-doc .col-md-10.col-md-offset-1 {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding-left: var(--kpf-inv-gutter) !important;
  padding-right: var(--kpf-inv-gutter) !important;
}

.kpf-invoice-doc .col-md-10.col-md-offset-1 {
  padding-top: var(--kpf-inv-stack) !important;
  padding-bottom: var(--kpf-inv-stack) !important;
}

.kpf-invoice-doc .col-md-10.col-md-offset-1.tw-mb-5 {
  padding-top: var(--kpf-inv-stack) !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* If overdue alert + main content both exist, collapse vertical gap */
.kpf-invoice-doc .col-md-10.col-md-offset-1.tw-mb-5 + .col-md-10.col-md-offset-1 {
  padding-top: 16px !important;
}

/* Top bar */
.kpf-invoice-doc__toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--kpf-inv-line) !important;
  background: #fff !important;
}

.kpf-invoice-doc__brand img {
  max-height: 28px !important;
  width: auto !important;
  display: block !important;
}

.kpf-invoice-doc__actions {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
}

.kpf-invoice-doc__actions form {
  display: inline !important;
  margin: 0 !important;
}

.kpf-invoice-doc__actions .btn,
.kpf-invoice-doc__actions .action-button {
  min-height: 32px !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
}

.kpf-invoice-doc__actions .btn-default,
.kpf-invoice-doc__actions button.action-button {
  background: transparent !important;
  border: 1px solid var(--kpf-inv-line) !important;
  color: var(--kpf-inv-secondary) !important;
}

.kpf-invoice-doc__actions .btn-default:hover,
.kpf-invoice-doc__actions button.action-button:hover {
  border-color: var(--kpf-inv-cobalt) !important;
  color: var(--kpf-inv-cobalt) !important;
  background: transparent !important;
}

.kpf-invoice-doc__actions .btn-success,
.kpf-invoice-doc__actions a.invoice-html-pay-now-top {
  background: var(--kpf-inv-cobalt) !important;
  border-color: var(--kpf-inv-cobalt) !important;
  color: #fff !important;
}

/* Title band */
.kpf-invoice-doc__titleband {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 0 var(--kpf-inv-stack) !important;
  padding: 0 0 18px !important;
  border-bottom: 1px solid var(--kpf-inv-line) !important;
  box-sizing: border-box !important;
}

.kpf-invoice-doc__kicker {
  display: block !important;
  margin: 0 0 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--kpf-inv-cobalt) !important;
}

.kpf-invoice-doc__titleband h4.invoice-html-number,
.kpf-invoice-doc h4.invoice-html-number {
  margin: 0 !important;
  font-family: var(--kodex-font-display, Satoshi, system-ui, sans-serif) !important;
  font-size: clamp(26px, 3vw, 34px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
  color: var(--kpf-inv-ink) !important;
}

.kpf-invoice-doc h4.invoice-html-number::before {
  content: none !important;
  display: none !important;
}

.kpf-invoice-doc__titleband-status .label,
.kpf-invoice-doc__titleband-status .badge,
.kpf-invoice-doc__titleband-status span {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 5px 9px !important;
  border: 0 !important;
}

/* Parties — equal From | Bill To columns, shared baseline */
.kpf-invoice-doc__masthead,
.kpf-invoice-doc__parties,
.kpf-invoice-doc .row.mtop20 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 0 !important;
  row-gap: 24px !important;
  align-items: start !important;
  width: 100% !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  border: 0 !important;
  box-sizing: border-box !important;
}

.kpf-invoice-doc__party,
.kpf-invoice-doc .transaction-html-info-col-left,
.kpf-invoice-doc .transaction-html-info-col-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  float: none !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.kpf-invoice-doc__party--from,
.kpf-invoice-doc .transaction-html-info-col-left {
  padding: 0 clamp(20px, 3.5vw, 36px) 0 0 !important;
}

.kpf-invoice-doc__party--to,
.kpf-invoice-doc .transaction-html-info-col-right {
  padding: 0 0 0 clamp(20px, 3.5vw, 36px) !important;
  border-left: 1px solid var(--kpf-inv-line) !important;
}

.kpf-invoice-doc__party-label,
.kpf-invoice-doc .invoice-html-bill-to,
.kpf-invoice-doc .invoice-html-ship-to {
  display: block !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  min-height: 14px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  text-align: left !important;
  color: var(--kpf-inv-muted) !important;
}

.kpf-invoice-doc address,
.kpf-invoice-doc .invoice-html-company-info,
.kpf-invoice-doc .invoice-html-customer-billing-info,
.kpf-invoice-doc .invoice-html-customer-shipping-info {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-style: normal !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  text-align: left !important;
  color: var(--kpf-inv-secondary) !important;
}

/* Name line (company / contact) — same weight both columns */
.kpf-invoice-doc address b,
.kpf-invoice-doc address strong,
.kpf-invoice-doc .company-name-formatted,
.kpf-invoice-doc .invoice-html-company-info b,
.kpf-invoice-doc .invoice-html-customer-billing-info b {
  display: block !important;
  margin: 0 0 6px !important;
  color: var(--kpf-inv-ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.35 !important;
}

.kpf-invoice-doc .invoice-html-ship-to {
  margin-top: 18px !important;
}

/* Dates */
.kpf-invoice-doc__dates {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 40px !important;
  width: 100% !important;
  margin: 0 0 var(--kpf-inv-stack) !important;
  padding: 14px 0 !important;
  border-top: 1px solid var(--kpf-inv-line) !important;
  border-bottom: 1px solid var(--kpf-inv-line) !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.kpf-invoice-doc .invoice-html-date,
.kpf-invoice-doc .invoice-html-duedate,
.kpf-invoice-doc .invoice-html-sale-agent,
.kpf-invoice-doc .invoice-html-project {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--kpf-inv-ink) !important;
  font-weight: 500 !important;
}

.kpf-invoice-doc .invoice-html-date .tw-font-medium,
.kpf-invoice-doc .invoice-html-duedate .tw-font-medium,
.kpf-invoice-doc .invoice-html-sale-agent .tw-font-medium,
.kpf-invoice-doc .invoice-html-project .tw-font-medium {
  color: var(--kpf-inv-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Line items — flush with gutter (no extra cell inset on edges) */
.kpf-invoice-doc .table-responsive {
  border: 0 !important;
  border-top: 1px solid var(--kpf-inv-line) !important;
  border-bottom: 1px solid var(--kpf-inv-line) !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin: 0 0 8px !important;
  width: 100% !important;
  padding: 0 !important;
}

.kpf-invoice-doc .table-responsive > table,
.kpf-invoice-doc table.items {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
}

.kpf-invoice-doc .table-responsive thead th,
.kpf-invoice-doc table.items thead th {
  background: transparent !important;
  color: var(--kpf-inv-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kpf-inv-line) !important;
  padding: 10px 12px !important;
}

.kpf-invoice-doc .table-responsive thead th:first-child,
.kpf-invoice-doc table.items thead th:first-child,
.kpf-invoice-doc .table-responsive tbody td:first-child,
.kpf-invoice-doc table.items tbody td:first-child {
  padding-left: 0 !important;
}

.kpf-invoice-doc .table-responsive thead th:last-child,
.kpf-invoice-doc table.items thead th:last-child,
.kpf-invoice-doc .table-responsive tbody td:last-child,
.kpf-invoice-doc table.items tbody td:last-child {
  padding-right: 0 !important;
  text-align: right !important;
}

.kpf-invoice-doc .table-responsive tbody td,
.kpf-invoice-doc table.items tbody td {
  border: 0 !important;
  border-bottom: 1px solid var(--kpf-inv-line-soft) !important;
  padding: 12px !important;
  vertical-align: top !important;
  color: var(--kpf-inv-secondary) !important;
  font-size: 13.5px !important;
  background: transparent !important;
  line-height: 1.4 !important;
}

.kpf-invoice-doc .table-responsive tbody tr:last-child td,
.kpf-invoice-doc table.items tbody tr:last-child td {
  border-bottom: 0 !important;
}

.kpf-invoice-doc .table-responsive tbody td:nth-child(2),
.kpf-invoice-doc table.items tbody td.description {
  color: var(--kpf-inv-ink) !important;
  font-weight: 500 !important;
}

/* Totals — same right edge as table */
.kpf-invoice-doc .col-md-6.col-md-offset-6 {
  width: min(280px, 100%) !important;
  margin: 20px 0 8px auto !important;
  padding: 0 !important;
}

.kpf-invoice-doc .col-md-6.col-md-offset-6 > .table {
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--kpf-inv-line) !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.kpf-invoice-doc .col-md-6.col-md-offset-6 > .table td {
  border: 0 !important;
  padding: 8px 0 !important;
  font-size: 13px !important;
  color: var(--kpf-inv-secondary) !important;
  background: transparent !important;
}

.kpf-invoice-doc .col-md-6.col-md-offset-6 > .table td:last-child {
  text-align: right !important;
}

.kpf-invoice-doc .col-md-6.col-md-offset-6 > .table tr:last-child td {
  border-top: 1px solid var(--kpf-inv-line) !important;
  padding-top: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--kpf-inv-ink) !important;
  background: transparent !important;
}

.kpf-invoice-doc .col-md-6.col-md-offset-6 > .table .total {
  color: var(--kpf-inv-cobalt) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

/* Lower sections — same gutter, no extra offsets */
.kpf-invoice-doc hr {
  border: 0 !important;
  border-top: 1px solid var(--kpf-inv-line) !important;
  margin: var(--kpf-inv-stack) 0 !important;
}

.kpf-invoice-doc .invoice-html-note,
.kpf-invoice-doc .invoice-html-terms-and-conditions,
.kpf-invoice-doc .invoice-html-payments,
.kpf-invoice-doc .invoice-html-files,
.kpf-invoice-doc .invoice-html-total-to-words,
.kpf-invoice-doc .invoice-html-offline-payments {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  box-sizing: border-box !important;
}

.kpf-invoice-doc .invoice-html-note b,
.kpf-invoice-doc .invoice-html-terms-and-conditions b,
.kpf-invoice-doc .invoice-html-payments b,
.kpf-invoice-doc .invoice-html-files b {
  display: block !important;
  margin-bottom: 8px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--kpf-inv-muted) !important;
}

.kpf-invoice-doc .invoice-payments-table {
  width: 100% !important;
  border: 0 !important;
  border-top: 1px solid var(--kpf-inv-line) !important;
  border-bottom: 1px solid var(--kpf-inv-line) !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.kpf-invoice-doc .invoice-payments-table thead th {
  background: transparent !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--kpf-inv-muted) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kpf-inv-line) !important;
  padding: 10px 12px !important;
}

.kpf-invoice-doc .invoice-payments-table thead th:first-child,
.kpf-invoice-doc .invoice-payments-table tbody td:first-child {
  padding-left: 0 !important;
}

.kpf-invoice-doc .invoice-payments-table thead th:last-child,
.kpf-invoice-doc .invoice-payments-table tbody td:last-child {
  padding-right: 0 !important;
  text-align: right !important;
}

.kpf-invoice-doc #online_payment_form {
  padding: 18px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--kpf-inv-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}

.kpf-invoice-doc #pay_now {
  background: var(--kpf-inv-cobalt) !important;
  border-color: var(--kpf-inv-cobalt) !important;
  color: #fff !important;
  min-height: 38px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.kpf-invoice-doc .clearfix {
  display: none !important;
}

@media (max-width: 720px) {
  :root {
    --kpf-inv-gutter: 18px;
    --kpf-inv-stack: 22px;
  }

  .kpf-invoice-doc__masthead,
  .kpf-invoice-doc__parties,
  .kpf-invoice-doc .row.mtop20 {
    grid-template-columns: 1fr !important;
    row-gap: 22px !important;
  }

  .kpf-invoice-doc__party--from,
  .kpf-invoice-doc .transaction-html-info-col-left,
  .kpf-invoice-doc__party--to,
  .kpf-invoice-doc .transaction-html-info-col-right {
    padding: 0 !important;
    border-left: 0 !important;
  }

  .kpf-invoice-doc__party--to,
  .kpf-invoice-doc .transaction-html-info-col-right {
    padding-top: 18px !important;
    border-top: 1px solid var(--kpf-inv-line) !important;
  }

  .kpf-invoice-doc__dates {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }

  .kpf-invoice-doc__titleband {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .kpf-invoice-doc .col-md-6.col-md-offset-6 {
    width: 100% !important;
  }
}

/* —— Template variants (Finance → Invoice templates) —— */

/* Modern */
.kpf-invoice-doc--modern {
  --kpf-inv-canvas: #f0f2f7;
  --kpf-inv-line-soft: #e8ebf2;
}

.kpf-invoice-doc--modern .kpf-invoice-doc__titleband {
  border-bottom: 0 !important;
  padding: 0 0 18px 14px !important;
  border-left: 4px solid var(--kpf-inv-cobalt) !important;
}

.kpf-invoice-doc--modern .kpf-invoice-doc__dates {
  background: var(--kpf-inv-canvas) !important;
  border: 0 !important;
  padding: 14px 16px !important;
  border-radius: 4px !important;
}

.kpf-invoice-doc--modern .table-responsive thead th,
.kpf-invoice-doc--modern table.items thead th {
  background: var(--kpf-inv-canvas) !important;
  color: var(--kpf-inv-secondary) !important;
}

/* Minimal */
.kpf-invoice-doc--minimal {
  --kpf-inv-cobalt: #40424d;
  --kpf-inv-muted: #8a8d99;
  --kpf-inv-line: #eceef2;
  --kpf-inv-stack: 36px;
  box-shadow: none !important;
}

.kpf-invoice-doc--minimal .kpf-invoice-doc__kicker {
  color: var(--kpf-inv-muted) !important;
}

.kpf-invoice-doc--minimal .kpf-invoice-doc__party--to,
.kpf-invoice-doc--minimal .transaction-html-info-col-right {
  border-left: 0 !important;
}

.kpf-invoice-doc--minimal .col-md-6.col-md-offset-6 > .table .total {
  color: var(--kpf-inv-ink) !important;
}

.kpf-invoice-doc--minimal .kpf-invoice-doc__actions .btn-success,
.kpf-invoice-doc--minimal .kpf-invoice-doc__actions a.invoice-html-pay-now-top,
.kpf-invoice-doc--minimal #pay_now {
  background: var(--kpf-inv-ink) !important;
  border-color: var(--kpf-inv-ink) !important;
}

/* Bold */
.kpf-invoice-doc--bold .kpf-invoice-doc__toolbar {
  background: #14141a !important;
  border-bottom: 0 !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.kpf-invoice-doc--bold .kpf-invoice-doc__brand img {
  filter: brightness(0) invert(1);
}

.kpf-invoice-doc--bold .kpf-invoice-doc__actions .btn-default,
.kpf-invoice-doc--bold .kpf-invoice-doc__actions button.action-button {
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
}

.kpf-invoice-doc--bold .kpf-invoice-doc__actions .btn-default:hover,
.kpf-invoice-doc--bold .kpf-invoice-doc__actions button.action-button:hover {
  border-color: #fff !important;
  color: #fff !important;
}

.kpf-invoice-doc--bold .kpf-invoice-doc__titleband {
  border-bottom-width: 2px !important;
  border-bottom-color: var(--kpf-inv-ink) !important;
}

.kpf-invoice-doc--bold .table-responsive thead th,
.kpf-invoice-doc--bold table.items thead th,
.kpf-invoice-doc--bold .invoice-payments-table thead th {
  background: #14141a !important;
  color: #fff !important;
  border-bottom-color: #14141a !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.kpf-invoice-doc--bold .table-responsive thead th:first-child,
.kpf-invoice-doc--bold table.items thead th:first-child {
  padding-left: 12px !important;
}

.kpf-invoice-doc--bold .table-responsive thead th:last-child,
.kpf-invoice-doc--bold table.items thead th:last-child {
  padding-right: 12px !important;
}

/* Compact */
.kpf-invoice-doc--compact {
  --kpf-inv-gutter: clamp(16px, 3vw, 28px);
  --kpf-inv-stack: 18px;
}

.kpf-invoice-doc--compact .kpf-invoice-doc__toolbar {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.kpf-invoice-doc--compact .kpf-invoice-doc__titleband h4.invoice-html-number,
.kpf-invoice-doc--compact h4.invoice-html-number {
  font-size: clamp(20px, 2.4vw, 24px) !important;
}

.kpf-invoice-doc--compact .kpf-invoice-doc__dates {
  padding: 10px 0 !important;
  gap: 8px 24px !important;
}

.kpf-invoice-doc--compact .table-responsive thead th,
.kpf-invoice-doc--compact table.items thead th,
.kpf-invoice-doc--compact .table-responsive tbody td,
.kpf-invoice-doc--compact table.items tbody td {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  font-size: 12.5px !important;
}

.kpf-invoice-doc--compact address,
.kpf-invoice-doc--compact .invoice-html-company-info,
.kpf-invoice-doc--compact .invoice-html-customer-billing-info {
  font-size: 12.5px !important;
}