.user-group{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.user-group:first-of-type{border-top:0;padding-top:0;margin-top:14px}
.user-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.user-heading small{display:block;color:var(--muted)}
.user-group{padding:14px;border-radius:6px;background:var(--theme-surface-soft,var(--surface));border:1px solid var(--theme-line,var(--line))}
.user-group.status-invoiced-unpaid{background:#fff4c2;border-color:#d6a91d;color:#4d3c00}
.user-group.status-invoiced-paid{background:#dff3e5;border-color:#4b9b68;color:#164a29}
.user-group.status-unbilled{background:var(--theme-surface-soft,var(--surface));}
.user-group.status-invoiced-unpaid .user-heading small,.user-group.status-invoiced-paid .user-heading small{color:inherit}
select option.status-invoiced-unpaid{background:#fff4c2 !important;color:#4d3c00 !important}
select option.status-invoiced-paid{background:#dff3e5 !important;color:#164a29 !important}
select option.status-unbilled{background:var(--theme-surface-soft,var(--surface)) !important;color:var(--theme-ink,var(--ink)) !important}

.user-payment-group{padding:14px;border:1px solid var(--theme-line,var(--line));border-radius:6px;background:var(--theme-surface-soft,var(--surface));margin-top:10px}
.user-payment-group.status-invoiced-unpaid{background:#fff4c2;border-color:#d6a91d;color:#4d3c00}
.user-payment-group.status-invoiced-paid{background:#dff3e5;border-color:#4b9b68;color:#164a29}
.user-payment-group.status-invoiced-unpaid small,.user-payment-group.status-invoiced-paid small{color:inherit}

:root[data-theme="dark"] .user-group.status-invoiced-unpaid,
:root[data-theme="dark"] .user-payment-group.status-invoiced-unpaid{background:#584b16;border-color:#d6b52d;color:#fff1a8}
:root[data-theme="dark"] select option.status-invoiced-unpaid{background:#584b16 !important;color:#fff1a8 !important}
:root[data-theme="dark"] select option.status-invoiced-paid{background:#1c4c31 !important;color:#d9f7e3 !important}
:root[data-theme="dark"] .user-group.status-invoiced-paid,
:root[data-theme="dark"] .user-payment-group.status-invoiced-paid{background:#1c4c31;border-color:#65b982;color:#d9f7e3}

#user-filter{display:flex;flex-wrap:wrap;align-items:end;gap:14px}
#user-filter>label{flex:1 1 190px;min-width:170px}
#user-filter>label select{width:100%}
#user-filter>#user-summary{flex:1 0 100%;margin:2px 0 0}
.stage-filter-buttons{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.filter-button{border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);cursor:pointer;font:700 .82rem Arial,sans-serif;padding:9px 12px;white-space:nowrap}
.filter-button:hover,.filter-button.is-selected{border-color:var(--brand);background:var(--brand);color:#fff}
#user-filter>.stage-filter-label{flex:1 1 100%}

@media (min-width:641px){
	#user-filter>label:not(.stage-filter-label){flex:0 1 260px}
}

@media (max-width:640px){
	#user-filter{align-items:stretch}
	#user-filter>label{flex-basis:100%}
}