/* Purchases: Bills and Vendors (ui/bills.js, ui/vendors.js). Wave's look (V, 11 Oct 2026): plain lists on the white page, a card for the form, pill buttons,
   blue bold row links with a round caret menu, hatched status badges, a dashed upload area with files as chips, a centred dialog for Record a manual payment.
   Page-specific rules only: shared tokens and components (.btn, .status, .menu, .field, .table, .panel, .note) live in app.css. Every class here starts with pv-,
   so nothing here depends on the older page rules in app.css. Sizes by token, colours by token. */

/* ---- Page width: Wave's lists are about 1040px wide and its forms about 960px, left aligned in the content area ---- */
.pv-w{width:100%;min-width:0;max-width:1040px}
.pv-w.pv-narrow{max-width:960px}
.page-head.pv-w h1{min-width:0;overflow-wrap:anywhere}   /* "Bill <number>" with a long number with no space in it wraps instead of pushing the page sideways */
.action-box.pv-w:empty{display:none}

/* ---- Small things: icons, blue text buttons, round buttons. The Actions cell of a list is the shared rowActions (a blue link and a round caret menu, app.css). ---- */
.pv-icon{flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform 140ms var(--ease)}
.pv-textbtn{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 6px;border-radius:var(--radius-xs);color:var(--accent);font-size:var(--type-s);font-weight:700;text-decoration:none;white-space:nowrap;transition:transform 140ms var(--ease),background 120ms var(--ease)}
.pv-textbtn:active{transform:matrix(.97,0,0,.97,0,0)}
@media (hover:hover) and (pointer:fine){.pv-textbtn:hover{background:var(--accent-soft)}}
.pv-table .circle-btn{position:relative}
.pv-table .circle-btn::after{content:"";position:absolute;inset:-4px}   /* the touch area is 40px, the circle is Wave's 32px */
.pv-icon-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--text-secondary);transition:background 120ms var(--ease),transform 140ms var(--ease)}
.pv-icon-btn:active{transform:matrix(.97,0,0,.97,0,0)}
@media (hover:hover) and (pointer:fine){.pv-icon-btn:hover{background:var(--grey-bg);color:var(--bad-ink)}}
.pv-void{min-height:var(--hit);width:48px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--bad-ink);border-radius:var(--pill);background:var(--btn-strong);color:var(--bad-ink);transition:background 120ms var(--ease),transform 140ms var(--ease)}
.pv-void:active{transform:matrix(.97,0,0,.97,0,0)}
@media (hover:hover) and (pointer:fine){.pv-void:hover{background:var(--bad-bg)}}

/* ---- Lists (Bills, Vendors): no card, a table with hairlines, Wave's filters above and its footer below ---- */
.pv-list{display:flex;flex-direction:column;gap:0}
.pv-table td.name{color:var(--text-primary)}
.pv-lt td.c-desc{white-space:pre-line}
.pv-table td.name .sub,.pv-table td.num .sub{margin-top:2px}
.pv-table td.num span:first-child{color:var(--text-primary)}
.pv-table td.act{white-space:nowrap}
.pv-bills td.c-no{overflow-wrap:anywhere}   /* a number with no space in it wraps inside its column instead of widening the table */
@media (min-width:960px){.pv-bills td.c-no{min-width:72px}}   /* but never so narrow that "No number" breaks inside a word */
.pv-sort{display:inline-flex;align-items:center;gap:4px;padding:0;font:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.pv-sort .pv-icon{stroke-width:2.5}
.pv-asc .pv-sort .pv-icon{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.pv-sort:hover{color:var(--text-primary)}}
.pv-filters{display:grid;grid-template-columns:minmax(0,1fr);gap:12px 24px;align-items:end}
.pv-range{display:flex;flex-wrap:wrap;gap:10px}
.pv-ft{display:flex;align-items:center;gap:8px;font-size:var(--type-s);color:var(--text-secondary)}
.pv-ft span{flex:none;min-width:36px}
.pv-ft input{width:160px}
.pv-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:14px}
.pv-show,.pv-pager{display:flex;align-items:center;gap:8px;font-size:var(--type-s);color:var(--text-secondary)}
.pv-show select{width:auto;min-height:36px;padding:0 8px}
.pv-page{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:50%;color:var(--accent);transition:background 120ms var(--ease),transform 140ms var(--ease)}
.pv-page:active{transform:matrix(.97,0,0,.97,0,0)}
.pv-page[disabled]{opacity:.45;cursor:default}
@media (hover:hover) and (pointer:fine){.pv-page:hover:not([disabled]){background:var(--accent-soft)}}
@media (min-width:960px){
  .pv-filters{grid-template-columns:minmax(0,280px) auto}
  .pv-table th.state{text-align:left;padding:0 18px 10px 0}
  .pv-table td.state{text-align:left;padding:0 18px 0 0}
  .pv-table th.text,.pv-table td.text,.pv-table th.name,.pv-table td.name{padding-right:18px}
  .pv-table th.num,.pv-table td.num{padding-right:0;padding-left:12px}
  .pv-table th.act,.pv-table td.act{padding-left:24px}
  .pv-bills td.c-amt,.pv-bills th.num{min-width:130px}
  .pv-lt th:nth-child(4),.pv-lt td:nth-child(4){padding-right:24px}
}
/* a laptop window or a tablet (the sidebar takes 224px of it): the same table with tighter cell padding, so the Actions column stays on screen */
@media (min-width:960px) and (max-width:1099px){
  .pv-table th.state,.pv-table td.state,.pv-table th.text,.pv-table td.text,.pv-table th.name,.pv-table td.name{padding-right:10px}
  .pv-table th.num,.pv-table td.num{padding-left:8px}
  .pv-table th.act,.pv-table td.act{padding-left:8px}
  .pv-table td.act .act-cell{gap:8px}
  .pv-bills td.c-amt,.pv-bills th.num{min-width:96px}
  .pv-bills td.c-no{min-width:66px}
}

/* ---- Forms: a white card, three columns on a wide screen, one on a phone ---- */
.pv-card{gap:20px}
.pv-h{font-size:var(--type-l);font-weight:700;color:var(--text-primary)}
.pv-top{display:grid;grid-template-columns:minmax(0,1fr);gap:16px 28px}
.pv-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.pv-vendor{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pv-vendor .field{width:100%}
.pv-quick{display:grid;gap:8px;width:100%}
.pv-vcard-box:empty{display:none}
.pv-vcard{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:var(--radius-sm);background:var(--bg-panel-2);color:var(--text-secondary);font-size:var(--type-s);overflow-wrap:anywhere}
.pv-vcard strong{color:var(--text-primary)}
@media (min-width:960px){.pv-top{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- Line items: Wave's card with a heading row (wide screens) and the Add a line link. Wave's columns (category, description, qty, price, amount) make the first
   line; what a bill needs besides (who paid, passed to the client) sits on a second line. On a phone every field has its label above it. ---- */
.pv-lines{display:flex;flex-direction:column;gap:6px;border:1px solid var(--divider);border-radius:var(--radius);padding:8px 16px 12px}
.pv-head{display:none}
.pv-rows{display:flex;flex-direction:column}
.pv-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px 0;border-top:1px solid var(--divider);align-items:end}
.pv-row:first-child{border-top:0}
.pv-row .c-kind,.pv-row .c-desc,.pv-row .c-paid,.pv-row .c-to,.pv-row .c-type{grid-column:1 / -1}
.pv-row .c-rm{display:flex;justify-content:flex-end;align-items:center}
.pv-row select{padding-left:8px;padding-right:4px}
.pv-row textarea{min-height:var(--hit);height:var(--hit);resize:vertical}
.pv-add{display:flex;gap:10px;flex-wrap:wrap}
@media (min-width:600px){
  .pv-row{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pv-row .c-kind,.pv-row .c-desc,.pv-row .c-paid,.pv-row .c-to,.pv-row .c-type{grid-column:span 2}
}
@media (min-width:1240px){
  .pv-head,.pv-row{display:grid;grid-template-columns:170px minmax(160px,1fr) 70px 100px 110px 36px;gap:8px}
  .pv-head{padding:8px 0 10px;font-size:var(--type-2xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary);border-bottom:1px solid var(--divider)}
  .pv-row{padding:10px 0;align-items:center}
  .pv-row .c-kind,.pv-row .c-desc{grid-column:auto}
  .pv-row .c-paid{grid-column:1;align-self:start}
  .pv-row .c-to{grid-column:2;align-self:start;justify-self:start;width:200px;max-width:100%}
  .pv-row .c-type{grid-column:3 / 7;align-self:start;justify-self:start;width:200px;max-width:100%}   /* the line Type, drawn only when the business has a chart of accounts */
  .pv-row .c-kind .lbl,.pv-row .c-desc .lbl,.pv-row .c-qty .lbl,.pv-row .c-rate .lbl,.pv-row .c-amt .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
.pv-totals-box{display:flex;justify-content:flex-end}
.pv-totals-box:empty{display:none}
.pv-totals{display:grid;grid-template-columns:auto auto;gap:6px 28px;text-align:right}
.pv-totals dd{font-variant-numeric:tabular-nums}
.pv-totals .due{font-weight:700}
.pv-pay-block{display:flex;flex-direction:column;gap:12px}

/* ---- Payments table on a bill (Payment Date, Payment Method, Amount, Actions) ---- */
.pv-pays .row-actions{display:inline-flex;gap:4px;flex-wrap:nowrap;justify-content:flex-end}
.pv-pays td.name .status{margin-left:10px}

/* ---- The bill page ---- */
.overview .when{font-size:var(--type-l);font-weight:700;margin-top:4px;color:var(--text-primary)}
.pv-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.pv-facts .fact-i{min-width:0}
.pv-facts .fact-i.wide{grid-column:1 / -1}
.pv-facts .fact-v{margin-top:4px;overflow-wrap:anywhere}
.pv-facts .pre{white-space:pre-line}
@media (min-width:960px){.pv-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- Attachments: Wave's Receipts look (dashed upload area) and the files as chips ---- */
.pv-drop{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 16px;border:2px dashed var(--line-strong);border-radius:var(--radius);text-align:center;color:var(--text-secondary);transition:background 120ms var(--ease),border-color 120ms var(--ease)}
.pv-drop.pv-over{background:var(--accent-soft);border-color:var(--accent)}
.pv-drop .pv-icon{color:var(--accent)}
.pv-drop-t{font-size:var(--type-m);font-weight:700;color:var(--text-primary)}
.pv-drop-h{font-size:var(--type-s);max-width:420px}
.pv-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.pv-chips[hidden]{display:none}
.pv-chip{--chip-hover:color-mix(in srgb,var(--accent) 8%,var(--accent-soft));display:inline-flex;align-items:center;min-width:0;max-width:100%;border-radius:var(--pill);background:var(--accent-soft);color:var(--text-nav);font-size:var(--type-s)}
.pv-chip-main{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;min-height:36px;padding:0 14px;border-radius:var(--pill);transition:background 120ms var(--ease),transform 140ms var(--ease)}
button.pv-chip-main:active{transform:matrix(.97,0,0,.97,0,0)}
@media (hover:hover) and (pointer:fine){button.pv-chip-main:hover{background:var(--chip-hover)}}
.pv-chip-name{min-width:0;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.pv-chip-size{flex:none;color:var(--text-secondary)}
.pv-chip-x{width:32px;height:32px;margin-right:2px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--text-secondary);transition:background 120ms var(--ease),transform 140ms var(--ease)}
.pv-chip-x:active{transform:matrix(.97,0,0,.97,0,0)}
@media (hover:hover) and (pointer:fine){.pv-chip-x:hover{background:var(--chip-hover);color:var(--text-primary)}}

/* ---- Dialog for the manual payment: 200ms ease-out entrance, none under reduced motion (app.css) ---- */
.pv-dlg{margin:auto;padding:0;border:0;border-radius:var(--radius);width:min(520px,calc(100vw - 2 * var(--gutter)));max-height:calc(100dvh - 32px);background:var(--bg-panel);color:var(--text-primary);box-shadow:0 8px 32px rgba(24,33,39,.24)}
.pv-dlg::backdrop{background:rgba(24,33,39,.45)}
.pv-dlg[open]{animation:pv-in 200ms var(--ease)}
@keyframes pv-in{from{opacity:0;transform:matrix(.97,0,0,.97,0,0)}to{opacity:1;transform:none}}
.pv-dlg-card{display:flex;flex-direction:column;max-height:calc(100dvh - 32px)}
.pv-dlg-title{padding:24px 24px 12px;font-size:var(--type-l);font-weight:700}
.pv-dlg-body{display:flex;flex-direction:column;gap:14px;padding:4px 24px 12px;overflow-y:auto}
.pv-dlg-foot{display:flex;flex-direction:column;gap:8px;padding:12px 24px 24px;border-top:1px solid var(--divider)}
.pv-dlg-actions{display:flex;justify-content:flex-end;gap:10px}
.pv-money{position:relative;display:flex;flex-direction:column;gap:6px}
.pv-money input{padding-left:28px}
.pv-cur{position:absolute;left:12px;top:0;height:var(--hit);display:flex;align-items:center;color:var(--text-secondary)}
.pv-cap{font-size:var(--type-s);color:var(--text-secondary)}
.pv-alloc{display:flex;flex-direction:column}
.pv-alloc-row{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:10px 12px;align-items:end;padding:10px 0;border-top:1px solid var(--divider)}
.pv-alloc-name{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere;font-weight:700}
.pv-alloc-name .sub{font-size:var(--type-xs);font-weight:400;color:var(--text-secondary)}
.pv-alloc-row .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- Vendor form: the type is a pair of radios with Wave's help text, and the rest of the form shows once one is chosen ---- */
.pv-types{display:flex;flex-direction:column;gap:10px;min-width:0;border:0}
.pv-types legend{padding:0;margin-bottom:8px;font-size:var(--type-xs);font-weight:700;color:var(--text-secondary)}
.pv-radio{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);cursor:pointer;transition:background 120ms var(--ease),border-color 120ms var(--ease)}
.pv-radio input{flex:none;width:20px;height:20px;min-height:0;margin-top:2px;padding:0;accent-color:var(--accent)}
.pv-radio:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.pv-rt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pv-rn{font-weight:700}
.pv-rh{font-size:var(--type-s);color:var(--text-secondary)}
.pv-rest{display:flex;flex-direction:column;gap:14px}
.pv-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 18px}
.pv-span{grid-column:1 / -1}
.pv-grid .check{display:flex;align-items:center;gap:12px;min-height:var(--hit);cursor:pointer}
.pv-grid .check input{flex:none;width:22px;height:22px;min-height:0;padding:0;accent-color:var(--accent)}
.pv-multi-row{display:flex;align-items:center;gap:8px}
.pv-multi-row input{flex:1 1 auto;min-width:0}
@media (min-width:960px){.pv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- Phones: a list row is a card. The vendor and the status head it; figures follow in a row; the actions close it. ---- */
@media (max-width:959px){
  .table.pv-table td.act{width:auto;text-align:left}
  .table.pv-table td.act .act-cell{display:flex;justify-content:space-between}
  .table.pv-table td.num:empty,.table.pv-table td.text:empty{display:none}
  .table.pv-bills td.c-date{grid-column:1;grid-row:2}
  .table.pv-bills td.c-no{grid-column:2;grid-row:2}
  .table.pv-bills td.c-due{grid-column:3;grid-row:2}
  .table.pv-bills td.c-amt{grid-column:1 / -1;grid-row:3;text-align:left}
  .table.pv-bills td.act{grid-column:1 / -1;grid-row:4}
  .table.pv-vend td.text{grid-column:1 / -1;overflow-wrap:anywhere}
  .table.pv-vend td.act{grid-column:1 / -1}
  .table.pv-pays td.name{grid-column:1 / 3;grid-row:1}
  .table.pv-pays td.num{grid-column:3;grid-row:1;text-align:right}
  .table.pv-pays td.text{grid-column:1 / -1}
  .table.pv-pays td.act{grid-column:1 / -1}
  .table.pv-lt td.name{grid-column:1 / 3;grid-row:1}
  .table.pv-lt td.c-amt{grid-column:3;grid-row:1;text-align:right}
  .table.pv-lt td.c-desc{grid-column:1 / -1;grid-row:2;white-space:pre-line}
  .table.pv-lt td.c-qty{grid-column:1;grid-row:3}
  .table.pv-lt td.c-rate{grid-column:2;grid-row:3}
  .table.pv-lt td.c-paid{grid-column:1 / 3;grid-row:4}
  .table.pv-lt td.c-to{grid-column:3;grid-row:4}
  .pv-pays .row-actions{flex-wrap:wrap;justify-content:flex-start}
}
/* a finger needs 44px: on a phone (or any touch screen) the small round and text controls grow to it, the chip bigger with them */
@media (max-width:599px),(pointer:coarse){
  .pv-textbtn,.pv-chip-main{min-height:44px}
  .pv-icon-btn,.pv-page,.pv-chip-x{width:44px;height:44px}
  .pv-chip-x{margin-right:0}
  .pv-table td.act .rowlink{display:inline-flex;align-items:center;min-height:44px}
  .pv-table .circle-btn::after{inset:-6px}
}
@media (max-width:599px){
  .pv-ft{flex:1 1 140px}
  .pv-ft input{width:100%;min-width:0}
  .pv-dlg-title{padding:20px 16px 8px}
  .pv-dlg-body{padding:4px 16px 8px}
  .pv-dlg-foot{padding:12px 16px 20px}
  .pv-alloc-row{grid-template-columns:minmax(0,1fr)}
}