/* Compact progress is independent of money, delivery quantities and documents. */
.purchase-order-summary { grid-template-columns:minmax(0,1fr) minmax(340px,1fr) 110px; }
.purchase-order-heading { grid-column:1; grid-row:1 / span 2; }
.purchase-timeline { grid-column:2 / -1; grid-row:1; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none; align-self:start; }
.purchase-timeline li { min-width:0; display:grid; justify-items:center; align-content:start; gap:3px; text-align:center; font-size:12px; line-height:1.4; position:relative; }
.purchase-timeline strong { font-size:12px; font-weight:600; }
.purchase-timeline small { font-size:12px; color:var(--muted); }
.progress-dot { width:12px; height:12px; border:1.5px solid #819183; border-radius:50%; background:white; }
.purchase-timeline .done .progress-dot { background:var(--forest); border-color:var(--forest); }
.purchase-timeline .partial .progress-dot { background:linear-gradient(90deg,var(--forest) 50%,white 50%); border-color:var(--forest); }
.purchase-order-overview { grid-column:2; grid-row:2; }
.purchase-order-summary .purchase-expand-label { grid-column:3; grid-row:2; }
.purchase-paid-summary { grid-column:1 / -1; margin:0; display:flex; flex-wrap:wrap; gap:6px 24px; font-size:13px; line-height:1.5; }
.purchase-paid-summary strong { font-variant-numeric:tabular-nums; }
#purchase-body:has(#purchase-payments-shell) { display:flex; flex-direction:column; padding:0; overflow:hidden; }
#purchase-payments-shell { min-height:0; display:flex; flex-direction:column; overflow:hidden; }
#purchase-payments-shell .purchase-fields { display:block; }
.payment-balances { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:16px 0 4px; }
.payment-balances>div { background:#f3f6f0; border-radius:8px; padding:10px; min-width:0; }
.payment-balances dt { font-size:13px; color:var(--muted); }
.payment-balances dd { margin:6px 0 0; font-weight:600; font-size:17px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.payment-state { font-size:14px; font-weight:600; }
#payment-feedback { color:var(--forest); background:#edf4eb; padding:12px; border-radius:8px; }
.payment-total-editor,.payment-optional,.payment-total-history { margin:16px 0; padding:12px 0; border-top:1px solid var(--line); }
.payment-total-editor summary,.payment-optional summary,.payment-total-history summary { cursor:pointer; min-height:36px; font-weight:600; }
#record-payment-form { border-top:1px solid var(--line); margin:20px 0; padding-top:8px; }
.payment-check { display:flex; align-items:flex-start; gap:10px; margin:12px 0; line-height:1.5; }
.payment-check input { flex:0 0 auto; width:20px; height:20px; margin:2px 0 0; }
.payment-check[hidden] { display:none; }
.payment-entry { padding:14px 0; border-top:1px solid var(--line); overflow-wrap:anywhere; }
.payment-entry p { margin:6px 0; font-size:14px; }
.payment-entry-heading,.payment-entry-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; }
.payment-entry-heading span { color:var(--muted); font-size:14px; }
.payment-entry.voided { border-left:3px solid #ad8152; padding-left:12px; }
.payment-entry.voided>.payment-entry-heading strong { text-decoration:line-through; }
.payment-entry-actions .button,#record-payment-form>.button { min-height:44px; }
.payment-retry { border:1px solid #ad8152; border-radius:8px; padding:12px; }
@media(max-width:1100px){
 .purchase-order-summary { grid-template-columns:minmax(0,1fr) minmax(330px,1.1fr); }
 .purchase-order-heading { grid-column:1; grid-row:1; }
 .purchase-timeline { grid-column:2; grid-row:1; }
 .purchase-order-overview { grid-column:1; grid-row:2; }
 .purchase-order-summary .purchase-expand-label { grid-column:2; grid-row:2; align-self:center; }
}
@media(max-width:700px){
 .purchase-order-summary { grid-template-columns:minmax(0,1fr); gap:12px; }
 .purchase-order-heading,.purchase-timeline,.purchase-order-overview,.purchase-order-summary .purchase-expand-label { grid-column:1; grid-row:auto; }
 .purchase-timeline { gap:4px; padding:10px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
 .purchase-timeline small { font-size:12px; }
 .purchase-order-summary .purchase-expand-label { min-height:28px; }
 .payment-balances { gap:4px; }
 .payment-balances>div { padding:8px 5px; }
 .payment-balances dd { font-size:14px; }
 .payment-entry-actions { align-items:stretch; }
 #purchase-payments-shell .field-grid { grid-template-columns:minmax(0,1fr); }
}