/* Reserve room for document identity even when the list styles load afterward. */
.commercial-lines .commercial-line .cl-id{flex:1 1 260px!important;min-width:min(260px,100%);max-width:100%;overflow:visible}
.commercial-lines .commercial-line .cl-id .cl-num{flex-wrap:wrap;white-space:normal;max-width:100%}
.commercial-lines .commercial-line .cl-id .cl-num strong{max-width:100%;overflow-wrap:anywhere}
.commercial-lines .commercial-line .cl-id .cl-num small{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.commercial-lines .commercial-line .cl-id .cl-client{display:block;white-space:normal!important;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;-webkit-line-clamp:unset;line-height:1.4}
@media(max-width:720px){
  .commercial-lines .commercial-line{grid-template-columns:20px minmax(0,1fr) auto;grid-template-areas:"check id id" ". status status" ". date total" "actions actions actions"}
  .commercial-lines .commercial-line .cl-status{justify-content:flex-start!important}
  .commercial-lines .commercial-line:not(:has(.cl-check)){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id id" "status status" "date total" "actions actions"}
}