/* Plain invoice page 0.67.0: full-page invoice editor with a live customer preview. Loaded last. */

#view-invoice .invoice-page-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px 24px;margin-bottom:22px}
#view-invoice .invoice-back{grid-column:1/-1;justify-self:start;font-size:13px;font-weight:700;color:#2563eb}
#view-invoice .invoice-page-title h1{margin:2px 0 6px;font-size:clamp(26px,2.4vw,34px);line-height:1.1}
#view-invoice .invoice-page-title .modal-intro{margin:0;max-width:640px;color:#65738b;font-size:13px}
#view-invoice .invoice-page-actions{margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
#view-invoice .invoice-page-actions>span{display:none}

#view-invoice .invoice-page-body{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
#view-invoice .invoice-page-editor{min-width:0;background:var(--surface,#fff);border:1px solid var(--line,#dce8f7);border-radius:18px;padding:22px}
#view-invoice .invoice-page-editor>*+*{margin-top:16px}

/* Line items: two compact rows per line so the editor and the preview fit side by side */
@media(min-width:901px){
  #view-invoice .invoice-lines{overflow:visible}
  #view-invoice .invoice-lines .line-head{display:none}
  #view-invoice .invoice-lines .line-row{display:grid;min-width:0;gap:8px 10px;padding:14px 0;align-items:end;
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.9fr) 72px 96px 72px minmax(84px,auto) 28px;
    grid-template-areas:"item desc desc desc desc desc desc remove" "account tracking tax qty rate disc total total"}
  #view-invoice .invoice-lines .line-row>label{display:grid;gap:4px;min-width:0}
  #view-invoice .invoice-lines .line-row>label>span,#view-invoice .line-total-wrap>small{display:block;font-size:12px;font-weight:700;color:#65738b}
  #view-invoice [data-line-field="Item"]{grid-area:item}
  #view-invoice [data-line-field="Description"]{grid-area:desc}
  #view-invoice [data-line-field="Account"]{grid-area:account}
  #view-invoice [data-line-field="Tracking"]{grid-area:tracking}
  #view-invoice [data-line-field="Tax"]{grid-area:tax}
  #view-invoice [data-line-field="Quantity"]{grid-area:qty}
  #view-invoice [data-line-field="Rate"]{grid-area:rate}
  #view-invoice [data-line-field="Discount"]{grid-area:disc}
  #view-invoice .line-total-wrap{grid-area:total;display:grid;gap:4px;text-align:right;padding-bottom:9px}
  #view-invoice .remove-line{grid-area:remove;align-self:end;margin-bottom:6px}
}

/* Preview: beside the editor on wide screens, below it otherwise */
#view-invoice .invoice-preview-panel{min-width:0}
#view-invoice .invoice-preview-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 2px 10px}
#view-invoice .invoice-preview-head small{color:#65738b;font-size:12px}
@media(min-width:1280px){
  #view-invoice .invoice-page-body{grid-template-columns:minmax(0,1fr) minmax(360px,440px)}
  #view-invoice .invoice-preview-panel{position:sticky;top:90px}
}

.invoice-paper{--paper-accent:#171d5b;background:#fff;color:#1d2433;border:1px solid #dfe5ee;border-radius:6px;box-shadow:0 18px 40px rgba(23,29,91,.08);padding:28px 26px;font-size:13px;line-height:1.45}
.invoice-paper[data-theme="BOLD"]{--paper-accent:#2563eb;border-top:6px solid var(--paper-accent)}
.invoice-paper[data-theme="MINIMAL"]{--paper-accent:#1d2433;box-shadow:none}
.invoice-paper .paper-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:16px;border-bottom:2px solid var(--paper-accent)}
.invoice-paper .paper-head>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.invoice-paper .paper-seller{font-size:15px;color:var(--paper-accent);overflow-wrap:anywhere}
.invoice-paper .paper-head small{color:#5b6475;font-size:12px}
.invoice-paper h2{margin:0;font-size:20px;letter-spacing:.02em;text-transform:uppercase;color:var(--paper-accent);white-space:nowrap}
.invoice-paper .paper-parties{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;margin:18px 0}
.invoice-paper .paper-parties>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.invoice-paper .paper-parties span,.invoice-paper dt,.invoice-paper .paper-pay>span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#5b6475}
.invoice-paper .paper-parties p{margin:2px 0 0;white-space:pre-line;overflow-wrap:anywhere}
.invoice-paper .paper-parties small{font-size:12px;color:#5b6475;overflow-wrap:anywhere}
.invoice-paper dl{margin:0;display:grid;gap:6px;text-align:right}
.invoice-paper dl div{display:grid;gap:0}
.invoice-paper dd{margin:0;font-weight:600}
.invoice-paper .paper-missing{color:#b45309;font-weight:600}
.invoice-paper .paper-lines{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.invoice-paper .paper-lines th{font-size:12px;text-align:right;color:#5b6475;font-weight:700;padding:8px 6px;border-bottom:1px solid #dfe5ee}
.invoice-paper .paper-lines td{text-align:right;padding:9px 6px;border-bottom:1px solid #eef1f5;vertical-align:top}
.invoice-paper .paper-lines th:first-child,.invoice-paper .paper-lines td:first-child{text-align:left;padding-left:0;overflow-wrap:anywhere}
.invoice-paper .paper-lines th:last-child,.invoice-paper .paper-lines td:last-child{padding-right:0}
.invoice-paper .paper-empty{text-align:center!important;color:#5b6475;padding:18px 0!important}
.invoice-paper .paper-totals{display:grid;gap:6px;margin:14px 0 0 auto;max-width:260px;font-variant-numeric:tabular-nums}
.invoice-paper .paper-totals>div{display:flex;justify-content:space-between;gap:16px}
.invoice-paper .paper-totals .paper-due{padding-top:8px;border-top:2px solid var(--paper-accent);font-weight:700}
.invoice-paper .paper-due strong{font-size:18px;color:var(--paper-accent)}
.invoice-paper .paper-totals small{font-size:12px;color:#5b6475;text-align:right}
.invoice-paper .paper-message{margin:18px 0 0;padding:12px 14px;background:#f6f8fb;border-radius:6px;white-space:pre-line}
.invoice-paper .paper-pay{margin-top:18px;padding-top:14px;border-top:1px solid #dfe5ee;display:flex;flex-direction:column;gap:3px}
.invoice-paper .paper-pay small{font-size:12px}

@media(max-width:900px){
  #view-invoice .invoice-page-head{grid-template-columns:1fr}
  #view-invoice .invoice-page-actions{justify-content:stretch}
  #view-invoice .invoice-page-actions .btn{flex:1 1 auto}
  #view-invoice .invoice-page-editor{padding:16px}
}
@media(max-width:480px){
  .invoice-paper{padding:20px 16px}
  .invoice-paper .paper-parties{grid-template-columns:1fr}
  .invoice-paper dl{text-align:left;grid-template-columns:1fr 1fr}
  .invoice-paper .paper-totals{max-width:none}
}