/* Invoices on the partnership journey: the ready-to-invoice line, invoice rows, the Xero connection, and the dialogs. */
.invoice-ready{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px;padding:14px 16px;background:#f7efe6;border:1px solid #e3cdb9;border-left:3px solid #94733a}
.invoice-ready p{margin:0;font-size:13px;line-height:1.5;color:#4a3a22}
.invoice-ready .primary{flex:none;white-space:nowrap}
.invoice-list{list-style:none;margin:0;padding:0}
.invoice-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 110px minmax(0,1.3fr) auto;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.invoice-what strong{display:block;font-size:14px;font-weight:600}
.invoice-what small{display:block;margin-top:2px;font-size:12px;color:#6b655b}
.invoice-amount{font:500 19px/1.2 var(--serif);font-variant-numeric:lining-nums tabular-nums;text-align:right}
.invoice-state{font-size:12px;color:#4c4a45}
.invoice-row.draft .invoice-state{color:#94733a}
.invoice-row.overdue .invoice-state{color:#9f3e31;font-weight:600}
.invoice-row.paid .invoice-state{color:var(--moss)}
.invoice-row.void{opacity:.6}
.invoice-row.void .invoice-amount{text-decoration:line-through}
.invoice-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;white-space:nowrap}
.quiet-link{color:#6b655b}
.invoice-stamp{display:inline-block;margin-right:8px;padding:0 10px;border:1.5px solid var(--moss);color:var(--moss);font:italic 500 17px/1.3 var(--serif);transform:rotate(-6deg)}
.invoice-more{display:flex;flex-wrap:wrap;gap:18px;margin:12px 0 0}
.invoice-xero{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:16px 0 0;padding-top:14px;border-top:1px dashed var(--line);font-size:12px;color:#6b655b}
.invoice-dot{width:8px;height:8px;border-radius:50%;background:#c9c2b5}
.invoice-dot.ok{background:var(--moss)}
.invoice-error{color:#9f3e31}
.invoice-form [hidden]{display:none!important}
.invoice-modes{display:flex!important;flex-wrap:wrap;gap:8px}
.invoice-modes legend{width:100%}
.invoice-modes label{display:flex!important;align-items:center;gap:8px;padding:9px 12px!important}
.invoice-lines ol{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.invoice-lines li{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);background:#fffdf8}
.invoice-line{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;cursor:pointer}
.invoice-line strong{display:block;font-size:13px;overflow-wrap:anywhere}
.invoice-line small{display:block;margin-top:2px;font-size:12px;color:#6b655b}
.invoice-fee{display:flex;align-items:center;gap:6px;font:13px var(--sans)}
.invoice-fee input{width:100%;min-width:0;padding:8px 10px;border:1px solid var(--line);background:#fffdf8;font:14px var(--sans);font-variant-numeric:tabular-nums}
.invoice-total{display:flex;justify-content:space-between;align-items:baseline;margin:0;padding:10px 0 0;border-top:1px solid var(--line);font:10px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#6b655b}
.invoice-total strong{font:500 24px var(--serif);font-variant-numeric:lining-nums tabular-nums;letter-spacing:0;text-transform:none;color:var(--ink)}
.invoice-field-label{margin:0 0 6px;font:10px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#6b655b}
.invoice-contact-chosen{margin:0}
.invoice-contact-search input{width:100%;padding:10px 12px;border:1px solid var(--line);background:#fffdf8;font:14px var(--sans)}
.invoice-contact-results,.invoice-xero-list{list-style:none;display:grid;gap:4px;margin:6px 0 0;padding:0}
.invoice-contact-results button{appearance:none;width:100%;display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border:1px solid var(--line);background:#fffdf8;text-align:left;cursor:pointer;font:13px var(--sans);color:var(--ink)}
.invoice-contact-results button:hover{border-color:var(--ink)}
.invoice-contact-results small{color:#6b655b}
.invoice-xero-list label{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--line);background:#fffdf8;cursor:pointer}
.invoice-xero-list label:has(input:disabled){opacity:.55;cursor:default}
.invoice-xero-list strong,.invoice-xero-list small{display:block}
.invoice-xero-list small{font-size:12px;color:#6b655b}
.invoice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.invoice-grid label{display:grid;gap:6px;font:10px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#6b655b}
.invoice-grid label.wide{grid-column:1/-1}
.invoice-grid input,.invoice-grid select{padding:10px 12px;border:1px solid var(--line);background:#fffdf8;font:14px var(--sans);text-transform:none;letter-spacing:0;color:var(--ink)}
.xero-steps{margin:0;padding-left:20px;display:grid;gap:8px;font-size:14px;line-height:1.5;color:#3d3a35}
.xero-steps code{padding:2px 6px;background:#efe9df;font:12px var(--mono);overflow-wrap:anywhere}
@media(max-width:1180px){.invoice-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"what amount" "state state" "actions actions";row-gap:6px}.invoice-what{grid-area:what}.invoice-amount{grid-area:amount}.invoice-state{grid-area:state}.invoice-actions{grid-area:actions;justify-content:flex-start}}
@media(max-width:700px){.invoice-ready{flex-direction:column;align-items:stretch}.invoice-lines li{grid-template-columns:1fr}.invoice-grid{grid-template-columns:1fr}}
/* Inside the invoice dialog the piece and fee fields are plain, not the boxed choices used elsewhere. */
.win-form .invoice-lines label{padding:0!important;border:0!important;background:none!important}
.invoice-modes label:has(input:checked){border-color:var(--ink)}