@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  font-family: 'DM Sans', sans-serif;
  color: #202a26;
  background: #f3f5f2;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #202a26;
  --muted: #78817c;
  --line: #e2e7e2;
  --green: #2f694f;
  --green-soft: #e8f0e9;
  --coral: #c26c51;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }

.topbar {
  height: 66px;
  padding: 0 max(6.5vw, 24px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.wordmark { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.wordmark-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: var(--green); font: 800 10px 'Manrope', sans-serif; letter-spacing: 0; }
.wordmark-divider { color: #a4ada6; padding: 0 4px; }
.local-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #77a180; }

main { max-width: 1120px; margin: 0 auto; padding: 50px 28px 30px; }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 37px; }
.eyebrow { margin: 0 0 10px; color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: 0.13em; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: 'Manrope', sans-serif; }
h1 { margin-bottom: 6px; font-size: 34px; line-height: 1.15; letter-spacing: 0; }
.subtitle { margin: 0; color: var(--muted); font-size: 14px; }
.period-control { display: grid; gap: 7px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; }
.period-control input { min-height: 39px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); font: 500 13px 'DM Sans', sans-serif; }
.page-actions { display: flex; align-items: end; gap: 10px; }
.export-action { display: grid; gap: 5px; }
.export-button { min-height: 39px; padding: 0 14px; border: 1px solid var(--green); border-radius: 4px; background: var(--green); color: #fff; cursor: pointer; font: 600 12px 'DM Sans', sans-serif; }
.export-button:hover { background: #285a43; }
.export-button:disabled { cursor: progress; opacity: 0.65; }
#export-status { min-height: 10px; color: var(--muted); font-size: 9px; }
#export-status.error { color: #a65039; }

.workspace { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.85fr); gap: 68px; align-items: start; }
.entry-section { padding: 0 0 30px; }
.purchase-section { padding-top: 27px; border-top: 1px solid #dce2dc; }
.section-heading { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 21px; }
.section-number { padding-top: 3px; color: var(--coral); font: 700 11px 'Manrope', sans-serif; }
.section-heading h2 { margin: 0 0 4px; font-size: 17px; letter-spacing: 0; }
.section-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.input-table { border-top: 1px solid var(--line); }
.table-heading { height: 33px; display: flex; justify-content: space-between; align-items: center; color: #8a938d; font-size: 9px; font-weight: 700; letter-spacing: 0.09em; }
.amount-row { min-height: 53px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e8ece8; font-size: 13px; }
.amount-row > span:first-child { display: flex; align-items: center; gap: 9px; }
.amount-row strong { margin-left: 1px; font-size: 12px; }
.rate-marker { width: 7px; height: 7px; border-radius: 50%; }
.rate-low { background: #cc815d; }
.rate-standard { background: #6a9678; }
.currency-input { width: 140px; min-height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: #89918c; }
.currency-input:focus-within { border-color: #8aa994; box-shadow: 0 0 0 2px #e8f0e9; }
.currency-input input { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); text-align: right; font: 500 13px 'DM Sans', sans-serif; }
.currency-input input::placeholder { color: #aeb6b0; }
.currency-input input::-webkit-inner-spin-button, .currency-input input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.currency-input input { appearance: textfield; }
.table-total { min-height: 42px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); font-size: 12px; font-weight: 600; }
.table-total strong { font-size: 13px; }

.sales-payments { margin-top: 4px; padding: 14px 15px 0; background: #eaf0eb; border-left: 2px solid #80a28a; }
.payments-heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 11px; }
.payments-heading h3 { margin: 0; font-size: 12px; font-weight: 700; }
.payments-heading > span { color: var(--muted); font-size: 10px; }
.sales-inputs { display: flex; gap: 18px; }
.sales-inputs label { flex: 1; display: grid; gap: 6px; color: #68736c; font-size: 10px; font-weight: 600; }
.sales-inputs .currency-input { width: 100%; min-height: 32px; }
.sales-inputs .currency-input input { font-size: 12px; }
.sales-payments .table-total { margin-top: 10px; }
.section-footnote { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.upload-panel { margin: 17px 0 12px; }
.invoice-drop-zone { min-height: 118px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; padding: 16px; border: 1px dashed #9cad9f; border-radius: 4px; background: #fbfcfa; text-align: center; transition: background 120ms ease, border-color 120ms ease; }
.invoice-drop-zone.drag-active { border-color: var(--green); background: var(--green-soft); }
.drop-zone-title { color: var(--ink); font-size: 13px; font-weight: 700; }
.drop-zone-caption { color: var(--muted); font-size: 11px; }
.upload-button, .review-actions button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid #cbd6cc; border-radius: 4px; background: #fff; color: var(--green); cursor: pointer; font: 600 11px 'DM Sans', sans-serif; }
.upload-button:hover, .review-actions button:hover { background: var(--green-soft); }
#invoice-files { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.upload-status { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.upload-status.error { color: #a65039; }
.invoice-review-list { display: grid; gap: 10px; margin-top: 10px; }
.review-panel { padding: 14px; border: 1px solid #dfe5df; border-left: 3px solid var(--coral); background: #fff; }
.review-panel h3 { margin: 0 0 3px; font: 700 13px 'Manrope', sans-serif; }
.review-filename { margin: 0 0 12px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.review-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.review-fields label { min-width: 0; display: grid; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 700; }
.review-fields label.wide { grid-column: span 2; }
.review-fields input { width: 100%; min-width: 0; height: 32px; padding: 0 7px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); font: 12px 'DM Sans', sans-serif; }
.review-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 12px; }
.review-actions .add-invoice { border-color: var(--green); background: var(--green); color: #fff; }
.review-actions .add-invoice:hover { background: #285a43; }
.review-actions .cancel-review { color: var(--muted); }
.invoice-edit-button { min-height: 28px; margin-right: 5px; padding: 0 9px; border: 1px solid #cbd6cc; border-radius: 3px; background: #fff; color: var(--green); cursor: pointer; font: 600 10px 'DM Sans', sans-serif; }
.invoice-edit-button:hover { background: var(--green-soft); }
.invoice-edit-dialog { width: min(620px, calc(100vw - 28px)); max-width: none; max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px; border: 1px solid #dfe5df; border-top: 3px solid var(--green); border-radius: 4px; background: #fff; color: var(--ink); }
.invoice-edit-dialog::backdrop { background: rgb(25 34 29 / 42%); }
.dialog-heading { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 20px; }
.dialog-heading .eyebrow { margin-bottom: 6px; }
.dialog-heading h2 { margin: 0; font-size: 19px; }
.invoice-edit-reference { padding-top: 17px; color: var(--muted); font-size: 11px; text-align: right; overflow-wrap: anywhere; }
.invoice-edit-dialog .review-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.invoice-edit-dialog .review-actions { margin-top: 18px; }
.invoice-document-dialog { width: min(1050px, calc(100vw - 28px)); max-width: none; max-height: calc(100vh - 28px); overflow: auto; padding: 18px; border: 1px solid #dfe5df; border-top: 3px solid var(--green); border-radius: 4px; background: #fff; color: var(--ink); }
.invoice-document-dialog::backdrop { background: rgb(25 34 29 / 55%); }
.invoice-document-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
.invoice-document-dialog [hidden] { display: none; }
.document-viewer-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.document-viewer-heading .eyebrow { margin-bottom: 5px; }
.document-viewer-heading h2 { margin: 0; font-size: 18px; }
.document-viewer-heading .invoice-edit-reference { display: block; padding-top: 5px; text-align: left; }
.invoice-document-image { display: block; max-width: 100%; max-height: calc(100vh - 125px); margin: 0 auto; object-fit: contain; }
.invoice-document-pdf { display: block; width: 100%; height: calc(100vh - 125px); border: 0; }
.invoice-overview { grid-column: 1 / -1; margin-top: 4px; padding-top: 24px; border-top: 1px solid #dce2dc; }
.invoice-table-wrap { overflow-x: auto; }
.invoice-table { width: 100%; min-width: 690px; border-collapse: collapse; text-align: right; font-size: 11px; }
.invoice-table th, .invoice-table td { padding: 11px 8px; border-bottom: 1px solid #e8ece8; white-space: nowrap; }
.invoice-table thead th { color: #8a938d; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; }
.invoice-table th:first-child { text-align: left; }
.invoice-table tbody th { font-size: 11px; font-weight: 600; }
.invoice-empty { padding: 18px 8px !important; color: var(--muted); text-align: center; }
.invoice-meta { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 400; }
.invoice-document-open { padding: 0; border: 0; background: transparent; color: var(--green); cursor: pointer; font: inherit; font-weight: 700; text-align: left; text-decoration: underline; text-underline-offset: 2px; }
.invoice-document-open:hover { color: #285a43; }
.invoice-delete { min-height: 28px; padding: 0 9px; border: 1px solid #d8aca0; border-radius: 3px; background: #fff; color: #a65039; cursor: pointer; font: 600 10px 'DM Sans', sans-serif; }
.invoice-delete:hover { background: #f5eae5; }
.invoice-table tfoot th, .invoice-table tfoot td { border-top: 1px solid #cfd8d0; border-bottom: 0; font-weight: 700; }
.invoice-total { font-weight: 600; }

.summary { padding: 21px 22px 18px; border: 1px solid #dfe5df; border-top: 3px solid var(--green); background: #fff; }
.summary-topline { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: 0.09em; }
.summary-period { color: var(--green); }
.summary h2 { margin: 12px 0 21px; font-size: 18px; letter-spacing: 0; }
.summary-group { padding: 14px 0; border-top: 1px solid var(--line); }
.summary-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.summary-row strong { font-size: 13px; font-weight: 700; }
.summary-detail { display: flex; justify-content: space-between; padding-top: 8px; color: var(--muted); font-size: 11px; }
.input-tax { padding-top: 15px; padding-bottom: 16px; }
.input-tax .summary-row span { max-width: 175px; }
.input-tax .summary-row strong { color: var(--coral); }
.payable { margin: 1px -22px -18px; padding: 18px 22px 17px; background: var(--green-soft); }
.payable > span { color: var(--green); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; }
.payable > strong { display: block; margin-top: 5px; color: var(--green); font: 800 29px 'Manrope', sans-serif; letter-spacing: 0; }
.payable.credit { background: #f5eae5; }
.payable.credit > span, .payable.credit > strong { color: #a6543d; }
.payable p { margin: 5px 0 0; color: #687a6d; font-size: 10px; }
.payable.credit p { color: #8b695e; }
.disclaimer { margin: 29px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.page-footer { display: flex; justify-content: space-between; margin-top: 44px; padding-top: 13px; border-top: 1px solid #dce2dc; color: #8b948e; font-size: 9px; letter-spacing: 0.04em; }
.page-footer span:first-child { font-weight: 700; letter-spacing: 0.12em; }

@media (max-width: 760px) {
  main { padding: 34px 20px 24px; }
  .workspace { grid-template-columns: 1fr; gap: 22px; }
  .page-heading { align-items: flex-start; margin-bottom: 30px; }
  .period-control { margin-top: 3px; }
  .period-control input { max-width: 150px; }
  .summary { grid-row: 1; }
  .invoice-overview { min-width: 0; }
  .invoice-table-wrap { overflow: visible; }
  .invoice-table { display: block; min-width: 0; text-align: left; }
  .invoice-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
  .invoice-table tbody, .invoice-table tfoot { display: grid; gap: 9px; }
  .invoice-table tbody tr, .invoice-table tfoot tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; padding: 8px 11px; border: 1px solid var(--line); }
  .invoice-table tbody th, .invoice-table tfoot th { grid-column: 1 / -1; padding: 8px 0; white-space: normal; }
  .invoice-table tbody td, .invoice-table tfoot td { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; white-space: normal; text-align: right; }
  .invoice-table tbody td::before, .invoice-table tfoot td::before { content: attr(data-label); color: var(--muted); font-size: 9px; text-align: left; }
  .invoice-table tfoot { margin-top: 8px; }
  .invoice-table tfoot tr { border-color: #cfd8d0; }
  .invoice-table tbody td:empty, .invoice-table tfoot td:empty { display: none; }
}

@media (max-width: 480px) {
  .topbar { height: 58px; padding: 0 18px; }
  .local-label { font-size: 9px; }
  main { padding: 27px 17px 22px; }
  .page-heading { display: grid; gap: 16px; }
  h1 { font-size: 30px; }
  .page-actions { width: 100%; justify-content: space-between; }
  .period-control { grid-template-columns: auto 1fr; align-items: center; }
  .period-control input { justify-self: end; }
  .summary { padding-right: 17px; padding-left: 17px; }
  .payable { margin-right: -17px; margin-left: -17px; padding-right: 17px; padding-left: 17px; }
  .currency-input { width: 126px; }
  .sales-inputs { gap: 10px; }
  .review-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoice-edit-dialog { padding: 17px; }
  .invoice-edit-dialog .review-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoice-document-dialog { padding: 13px; }
  .invoice-document-pdf { height: calc(100vh - 120px); }
  .invoice-document-image { max-height: calc(100vh - 120px); }
  .page-footer { gap: 12px; line-height: 1.5; }
}