/* Customers and Customer Statements (ui/customers.js, ui/statements.js). Page-specific rules only: shared tokens and components live in app.css.
   Every class here starts with cu- (customers) or st- (statements) so no other page's file can collide with it. Sizes use the type tokens; colours are tokens.
   Wave's list, form, customer page and statement, in Wave's values: 40px fields, pill buttons, 32px circle buttons, a 12px card, labels left and right aligned at 200px,
   320px fields, grey panels in --bg-panel-2. Press feedback shrinks a control to .97, hover only where a pointer hovers, nothing animates on a keyboard action. */

/* ---- small parts used by both pages ---- */
.cu-ico{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cu-circle{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;min-height:32px;padding:0;border:1px solid var(--accent);border-radius:50%;background:var(--btn-strong);color:var(--accent);text-decoration:none;transition:background 120ms var(--ease),transform 140ms var(--ease)}
.cu-circle::after{content:"";position:absolute;inset:-6px}
.cu-circle:active{transform:matrix(.97,0,0,.97,0,0)}
.cu-circle[disabled]{opacity:.45;cursor:default}
.cu-circle .cu-ico{transition:transform 140ms var(--ease)}
.cu-ico.cu-dots{stroke-width:2.8}
.cu-circle[aria-expanded=true] .cu-ico{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.cu-circle:hover:not([disabled]){background:var(--btn-strong-hover)}}
.cu-pill{display:inline-flex;align-items:center;gap:8px}
.cu-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:var(--on-accent);font-size:var(--type-2xs);font-weight:700}
.cu-link,.cu-linkbtn{display:inline-flex;align-items:center;min-height:32px;padding:0;color:var(--accent);font-size:var(--type-s);font-weight:700;text-align:left;transition:color 120ms var(--ease),transform 140ms var(--ease)}
.cu-link:active,.cu-linkbtn:active{transform:matrix(.97,0,0,.97,0,0)}
@media (hover:hover) and (pointer:fine){.cu-link:hover,.cu-linkbtn:hover{text-decoration:underline}}
.cu-hint{font-size:var(--type-xs);color:var(--text-secondary)}
.cu-err{font-size:var(--type-xs);font-weight:600;color:var(--bad-ink)}
.cu-err:empty{display:none}
.cu-msg{color:var(--text-secondary);max-width:46ch}
.cu-none{color:var(--text-tertiary)}
.cu-cur{font-size:var(--type-xs);font-weight:400;color:var(--text-secondary)}
.cu-late,.table td .sub.cu-late{color:var(--bad-ink)}
.cu-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cu-grow{flex:1 1 auto}
.cu-info{color:var(--text-secondary)}
.btn.primary.cu-warn{background:var(--bad-ink);border-color:var(--bad-ink)}
@media (hover:hover) and (pointer:fine){.btn.primary.cu-warn:hover{background:var(--bad-ink);filter:brightness(.85)}}

/* ---- menus: the shared .menu with Wave's rules, a red Delete, a chosen Sort ---- */
.menu.cu-left{left:0;right:auto;transform-origin:top left}
.menu.cu-menu.cu-up{top:auto;bottom:calc(100% + 4px);transform-origin:bottom right}
.menu.cu-menu.cu-up.cu-left{transform-origin:bottom left}
.menu.cu-menu{max-width:calc(100vw - 2 * var(--gutter))}
.cu-menu button{display:flex;align-items:center;gap:10px}
.cu-menu li.cu-rule{margin-top:6px;padding-top:6px;border-top:1px solid var(--divider)}
.cu-menu button.cu-danger{color:var(--bad-ink)}
.cu-menu button[aria-checked=true]{font-weight:700;background:var(--accent-soft)}

/* ---- dialogs (<dialog>, modal): Filters, Import customers, Send reminder, Send statement, Delete customer ---- */
.cu-dlg{margin:auto;width:min(520px,calc(100vw - 2 * var(--gutter)));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:var(--radius);background:var(--bg-panel);color:var(--text-primary);box-shadow:0 16px 48px rgba(24,33,39,.28);overflow:hidden}
.cu-dlg.wide{width:min(680px,calc(100vw - 2 * var(--gutter)))}
.cu-dlg.huge{width:min(920px,calc(100vw - 2 * var(--gutter)))}
.cu-dlg[open]{animation:cu-in 200ms var(--ease)}
.cu-dlg::backdrop{background:rgba(24,33,39,.45)}
.cu-dlg[open]::backdrop{animation:cu-fade 200ms var(--ease)}
@keyframes cu-in{from{opacity:0;transform:matrix(.97,0,0,.97,0,0)}to{opacity:1;transform:none}}
@keyframes cu-fade{from{opacity:0}to{opacity:1}}
.cu-dlg-in{display:flex;flex-direction:column;max-height:calc(100dvh - 32px)}
.cu-dlg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px 8px}
.cu-dlg-head h2{font-size:var(--type-l);font-weight:700;line-height:1.25}
.cu-dlg-body{display:flex;flex-direction:column;gap:14px;padding:8px 24px 20px;overflow-y:auto}
.cu-dlg-foot{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;padding:14px 24px;border-top:1px solid var(--divider)}
.cu-set{display:flex;flex-direction:column;gap:6px;min-width:0;border:0;padding:0}
.cu-set legend{padding:0;margin-bottom:6px;font-size:var(--type-xs);font-weight:700;color:var(--text-secondary)}
.cu-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cu-money{position:relative}
.cu-money>span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-secondary);pointer-events:none}
.cu-money input{padding-left:26px}
@media (max-width:519px){.cu-dlg-head{padding:16px 16px 8px}.cu-dlg-body{padding:8px 16px 16px}.cu-dlg-foot{padding:12px 16px}}

/* ---- the Send dialog (Wave: the form at the left, the customer's inbox at the right) ---- */
.cu-send{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:760px){.cu-send:not(.solo){grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}}
.cu-send-form,.cu-send-pre{display:flex;flex-direction:column;gap:14px;min-width:0}
.cu-to-row{display:flex;align-items:flex-start;gap:10px}
.cu-to{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-width:0}
.cu-to-row>.cu-circle{margin-top:4px}
.cu-mail{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--divider);border-radius:var(--radius);background:var(--bg-panel-2);overflow-wrap:anywhere}
.cu-mail-biz{padding-bottom:10px;border-bottom:1px solid var(--divider);font-weight:700}
.cu-mail-head{margin-top:4px;font-size:var(--type-l);font-weight:700;line-height:1.25}
.cu-mail-line{color:var(--text-secondary)}
.cu-mail-msg{display:flex;flex-direction:column;margin-top:8px}
.cu-mail-msg>div{min-height:1.35em;white-space:pre-wrap}

/* ---- the list ---- */
.cu-panel{gap:18px}
.cu-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cu-search{position:relative;flex:1 1 260px;min-width:0}
.cu-search input{padding-right:48px}
.cu-search .cu-circle{position:absolute;right:4px;top:4px}
.cu-list td.name .rowlink{font-size:var(--type-m)}
.cu-owed{color:var(--text-primary);font-weight:700}
.cu-empty:not(:empty){display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 16px;text-align:center}
.cu-empty .note{justify-content:center;font-size:var(--type-l);font-weight:700;color:var(--text-primary)}
.cu-art{display:flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;background:var(--accent-soft);color:var(--accent)}
.cu-art .cu-ico{width:40px;height:40px}
.cu-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px 18px;color:var(--text-secondary);font-size:var(--type-s)}
.cu-show{display:inline-flex;align-items:center;gap:8px}
.cu-show select{width:auto;min-height:32px;padding:0 8px}
.cu-pages{display:inline-flex;gap:10px}
@media (max-width:959px){
  .table.cu-list tr{grid-template-columns:minmax(0,1fr) auto}
  .table.cu-list td.name{grid-column:1;grid-row:1}
  .table.cu-list td.act{grid-column:2;grid-row:1;width:auto;align-self:center}
  .table.cu-list td.text,.table.cu-list td.num{grid-column:1 / -1;overflow-wrap:anywhere}
  .table.cu-list td.text:empty,.table.cu-list td.num:empty{display:none}
}
@media (min-width:960px){
  .table.cu-list th.name{width:30%}
  .table.cu-list td.text{overflow-wrap:anywhere}
  .table.cu-list th.num,.table.cu-list td.num{padding-right:24px}
}

/* ---- the form (Wave: labels at the left and right aligned, fields 320px wide) ---- */
.cu-form{gap:0;max-width:960px}
.cu-sec{margin:32px 0 6px;font-size:var(--type-xxl);font-weight:700;line-height:1.2}
.cu-sec:first-child{margin-top:0}
.cu-row{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;align-items:start;padding:10px 0}
.cu-lbl{padding-top:10px;font-size:var(--type-xs);font-weight:700;line-height:1.3;color:var(--text-secondary)}
.cu-lbl:empty{display:none}
.cu-ctl{display:flex;flex-direction:column;gap:6px;min-width:0;width:100%;max-width:320px}
.cu-one{display:flex;flex-direction:column;gap:6px}
.cu-btns{flex-direction:row;flex-wrap:wrap;gap:10px}
@media (min-width:720px){
  .cu-row{grid-template-columns:200px 320px;column-gap:24px}
  .cu-lbl{text-align:right}
  .cu-lbl:empty{display:block}
}
.cu-float{position:relative;display:block}
.cu-float input,.cu-float select{min-height:52px;padding:22px 12px 6px}
.cu-float-t{position:absolute;left:13px;top:15px;max-width:calc(100% - 26px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--type-m);color:var(--text-secondary);pointer-events:none;transform-origin:left top;transition:transform 140ms var(--ease)}
.cu-float input:focus ~ .cu-float-t,.cu-float input:not(:placeholder-shown) ~ .cu-float-t,.cu-float select ~ .cu-float-t{transform:translateY(-9px) matrix(.75,0,0,.75,0,0)}
.cu-float select:has(option[value=""]:checked):not(:focus) ~ .cu-float-t{transform:none}
.cu-float select:has(option[value=""]:checked) ~ .cu-float-t{transform:none}
.cu-float select:focus ~ .cu-float-t{transform:translateY(-9px) matrix(.75,0,0,.75,0,0)}
.cu-contact{display:flex;flex-direction:column;gap:10px;width:100%;padding:14px;border-radius:var(--radius);background:var(--bg-panel-2)}
.cu-phones{display:flex;flex-direction:column;gap:10px}
.cu-links{display:flex;flex-wrap:wrap;gap:4px 16px}
.cu-group{display:flex;flex-direction:column;gap:10px;min-width:0;border:0;padding:0}
.cu-region{display:block}

/* ---- the customer page ---- */
.cu-seg{align-self:flex-start;max-width:100%}
.cu-over{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
@media (min-width:960px){.cu-over{grid-template-columns:300px minmax(0,1fr)}}
.cu-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.cu-profile{gap:16px}
.cu-avatar{width:64px;height:64px}
.cu-av-bg{fill:var(--accent-soft)}
.cu-av-fg{fill:var(--line-strong)}
.cu-fact{display:flex;flex-direction:column;gap:4px;min-width:0}
.cu-lines{display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
.cu-strong{font-weight:700}
.big.cu-sent{font-size:var(--type-m)}
.cu-unpaid{list-style:none;display:flex;flex-direction:column}
.cu-unpaid li{display:grid;grid-template-columns:96px minmax(0,1fr) 170px 110px 32px;align-items:center;gap:8px 16px;padding:12px 0;border-top:1px solid var(--divider)}
.cu-due{color:var(--text-secondary);text-align:right}
.cu-due.cu-late{color:var(--bad-ink)}
.cu-amt{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:719px){
  .cu-unpaid li{grid-template-columns:auto minmax(0,1fr) auto 32px}
  .cu-unpaid li>:nth-child(1){grid-column:1;grid-row:1}
  .cu-unpaid li>:nth-child(2){grid-column:2 / 4;grid-row:1}
  .cu-unpaid li>:nth-child(5){grid-column:4;grid-row:1}
  .cu-unpaid li>:nth-child(3){grid-column:1 / 3;grid-row:2}
  .cu-unpaid li>:nth-child(4){grid-column:3 / 5;grid-row:2}
}
.cu-tab{display:flex;flex-direction:column;gap:18px;min-width:0}
.cu-h2{font-size:var(--type-xxl);font-weight:700;line-height:1.2}
.cu-filters{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.cu-sort{display:inline-flex;align-items:center;gap:6px;padding:0;min-height:20px;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.cu-acts{display:inline-flex;align-items:center;justify-content:flex-end;gap:10px}
.cu-acts .rowlink{font-size:var(--type-s)}
.cu-nfilters{color:var(--text-secondary);font-size:var(--type-s)}
@media (max-width:959px){
  .table.inv.cu-inv tr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .table.inv.cu-inv td.state{grid-column:1;grid-row:1;text-align:left;padding:0}
  .table.inv.cu-inv td.act{grid-column:2;grid-row:1;width:auto;text-align:right}
  .table.inv.cu-inv td.text:nth-child(2){grid-column:1;grid-row:2}
  .table.inv.cu-inv td.text:nth-child(3){grid-column:2;grid-row:2}
  .table.inv.cu-inv td.num:nth-child(4){grid-column:1;grid-row:3}
  .table.inv.cu-inv td.num:nth-child(5){grid-column:2;grid-row:3}
  .table.inv.cu-inv td.num:empty,.table.inv.cu-inv td.text:empty{display:none}
}

/* ---- Activity feed ---- */
.cu-feed{list-style:none;display:flex;flex-direction:column}
.cu-act{border-top:1px solid var(--divider)}
.cu-act:first-child{border-top:0}
.cu-act-row{display:grid;grid-template-columns:120px 32px minmax(0,1fr) 32px;align-items:center;gap:12px;min-height:56px;padding:8px 0}
.cu-act-date{color:var(--text-secondary);font-size:var(--type-s)}
.cu-act-ico{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent)}
.cu-act-text{min-width:0;overflow-wrap:anywhere}
.cu-more{padding:0 0 14px 156px}
.cu-more dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px}
.cu-more dt{color:var(--text-secondary);font-weight:700;font-size:var(--type-s)}
.cu-more dd{overflow-wrap:anywhere}
@media (max-width:719px){
  .cu-act-row{grid-template-columns:32px minmax(0,1fr) 32px;row-gap:2px}
  .cu-act-date{grid-column:1 / -1}
  .cu-more{padding-left:0}
}

/* ---- Customer Statements (Wave: the grey form with Refresh, More actions and Send statement, then the white paper) ---- */
.st-form{border:0;background:var(--bg-panel-2)}
.st-fields{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px}
.st-fields>.field{flex:1 1 200px}
.st-dates{flex:2 1 340px;min-width:0;border:0;padding:0}
.st-dates legend{padding:0;margin-bottom:6px;font-size:var(--type-xs);font-weight:700;color:var(--text-secondary)}
.st-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.st-go{flex:none}
@media (min-width:960px){.st-go{margin-left:auto}}
@media (max-width:719px){.st-go{width:100%}}
.st-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 16px;text-align:center}
.st-empty h2{font-size:var(--type-xxl);font-weight:700;line-height:1.2}
.st-art{width:120px;height:96px}
.st-art-page{fill:var(--bg-panel);stroke:var(--line-strong);stroke-width:2}
.st-art-line{fill:none;stroke:var(--line-strong);stroke-width:3;stroke-linecap:round}
.st-art-dot{fill:var(--accent)}
.st-art-tick{fill:none;stroke:var(--on-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.st-result{display:flex;flex-direction:column;gap:18px}
.st-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
/* the paper: a white page with a grey bar across its top edge */
.st-sheet{gap:0;padding:0;overflow:hidden}
.st-bar{height:10px;background:var(--line-strong)}
.st-body{display:flex;flex-direction:column;gap:24px;padding:28px 32px}
.st-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px}
.st-from{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.st-biz{font-weight:700}
.st-title{text-align:right}
.st-title h2{font-size:var(--type-xxl);font-weight:700;line-height:1.15}
.st-kind{color:var(--text-secondary)}
.st-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.st-bill{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.st-name{font-weight:700}
.st-right{display:flex;flex-direction:column;gap:10px;min-width:0}
.st-pairs,.st-sum{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:6px 24px}
.st-pairs dt,.st-sum dt{text-align:right;color:var(--text-secondary)}
.st-pairs dd,.st-sum dd{text-align:right;font-variant-numeric:tabular-nums}
.st-sum .strong{font-weight:700;color:var(--text-primary)}
.st-rule{height:1px;background:var(--divider)}
.st-final{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 24px;font-weight:700}
.st-fact{color:var(--text-secondary)}
.table.st-table tr.total td{font-weight:700;border-top:1px solid var(--text-tertiary)}
@media (max-width:959px){
  .table.st-table td.name,.table.st-table td.wide{grid-column:1 / -1}
  .table.st-table td:empty{display:none}
  .table.st-table tr.total{border-top:1px solid var(--text-tertiary)}
  .table.st-table tr.total td{border-top:0}
}
@media (max-width:719px){
  .st-body{gap:20px;padding:20px 16px}
  .st-meta{grid-template-columns:minmax(0,1fr)}
  .st-title{text-align:left}
  .st-final{justify-content:space-between}
}
@media print{
  .st-form,.st-actions,.st-how,.st-bar{display:none!important}
  .st-sheet{border:0;border-radius:0}
  .st-body{padding:0}
}

@media (prefers-reduced-motion:reduce){.cu-dlg[open],.cu-dlg[open]::backdrop{animation:none}}

/* ---- the primary contact's other numbers (Add phone shows Mobile, Toll free and Fax) ---- */
.cu-more-phones{display:flex;flex-direction:column;gap:10px}