.invoice-page { max-width: 1360px; color: #1d1d1b; }
.invoice-page > header { display: block; }
.invoice-panel { background: #fff; border: 1px solid #ebebf3; border-radius: 1rem; padding: 1.5rem; }
.invoice-simulation-notice { background: #ebebf3; border: 1px solid #a2a0e7; border-radius: 1rem; padding: 1.25rem 1.5rem; }
.invoice-simulation-notice > div:first-child { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.invoice-simulation-badge { background: #ffc602; color: #1d1d1b; padding: .3rem .65rem; border-radius: .45rem; font-weight: 700; }
.invoice-simulation-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin: 1rem 0; }
.invoice-simulation-controls > div { flex: 1 1 220px; }
.invoice-simulation-controls .form-label { font-weight: 600; }
.invoice-help, .invoice-cell-secondary { color: #1d1d1b; font-size: .875rem; line-height: 1.5; }
.invoice-latest { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem; border-top: 4px solid #a2a0e7; }
.invoice-latest h2 { font-size: 2.4rem; font-weight: 700; }
.invoice-latest-payment { align-self: center; }
.invoice-latest-payment > .invoice-status { margin-bottom: 1rem; }
.invoice-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.invoice-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.invoice-summary h2 { color: #1d1d1b; }
.invoice-summary-amount { font-size: 1.75rem; font-weight: 700; margin: .75rem 0; }
.invoice-history-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1.5rem; }
.invoice-filter-link, .invoice-details-link { color: #1d1d1b; text-underline-offset: .2em; }
.invoice-filter-link { white-space: nowrap; font-size: .875rem; }
/* Keep absolutely positioned screen-reader labels inside the scrolling table. */
.invoice-table-wrap { position: relative; overflow-x: auto; }
.invoice-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.invoice-table th { background: #efefef; font-size: .8125rem; color: #1d1d1b; font-weight: 600; }
.invoice-table th, .invoice-table td { text-align: left; padding: 1rem .75rem; vertical-align: middle; }
.invoice-table td { border-bottom: 1px solid #ebebf3; }
.invoice-table th:first-child { border-radius: .5rem 0 0 .5rem; }
.invoice-table th:last-child { border-radius: 0 .5rem .5rem 0; }
.invoice-cell-secondary { display: block; margin-top: .25rem; }
.invoice-money { white-space: nowrap; font-weight: 600; }
.invoice-details-link { font-weight: 600; }
.invoice-status { display: inline-block; border-radius: 2rem; font-size: .8125rem; font-weight: 600; padding: .35rem .65rem; white-space: nowrap; }
.invoice-status-paid { color: #235d35; background: #e8f3eb; }
.invoice-status-pending { color: #57522b; background: #fff4c2; }
.invoice-status-failed { color: #973533; background: #fbe9e8; }
.invoice-status-partial { color: #84521d; background: #fff0d9; }
.invoice-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.invoice-pagination > div { display: flex; gap: .5rem; }
.invoice-empty { background: #efefef; padding: 2rem 1.25rem; border-radius: .75rem; }
.invoice-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
.invoice-facts dt { font-weight: 500; color: #1d1d1b; font-size: .875rem; margin-bottom: .25rem; }
.invoice-facts dd { margin-bottom: 0; overflow-wrap: anywhere; }
.invoice-amounts { max-width: 420px; margin: 1.5rem 0 1.5rem auto; }
.invoice-amounts > div { display: flex; justify-content: space-between; gap: 1rem; margin: .5rem 0; }
.invoice-amounts dt { font-weight: 500; }
.invoice-amounts dd { margin: 0; white-space: nowrap; }
.invoice-total { padding-top: .75rem; border-top: 1px solid #ebebf3; font-weight: 700; }
.invoice-total dt { font-weight: 700; }
.invoice-payment-detail { padding-top: 1.5rem; border-top: 1px solid #ebebf3; }
.invoice-explanation summary { cursor: pointer; font-weight: 600; }
#factuurdetails { scroll-margin-top: 1.5rem; }
@media (max-width: 767.98px) {
    .invoice-panel, .invoice-simulation-notice { padding: 1.25rem; }
    .invoice-latest, .invoice-summary { grid-template-columns: 1fr; gap: 1rem; }
    .invoice-summary .invoice-panel { padding: 1rem 1.25rem; }
    .invoice-summary-amount { margin: .5rem 0; }
    .invoice-history-heading { align-items: flex-start; flex-direction: column; }
    .invoice-facts { grid-template-columns: 1fr; }
    .invoice-table { min-width: 690px; }
    .invoice-lines { min-width: 460px; }
    .invoice-simulation-controls > .btn { width: 100%; }
    .invoice-simulation-notice > div:first-child { align-items: flex-start; flex-wrap: wrap; }
}